vue uploads a file to azure blob using axios, but the body value is not received from the back server

user_14532751 0
Viewed 363

Help me

It is structured like this. In blob.js In the blobName function, filed returns normally and req.body does not. I don't know why.

When transferring a file from the back server to ejs, the value of req.body is normally received.

Thanks

express blob.js

const MulterAzureStorage = require('multer-blob-storage').MulterAzureStorage

const blobName = (req, file) => {
  console.log(req.body)
  const publisher = req.body.publisher
  const grade = req.body.grade
  const subject = req.body.subject
  const version = req.body.version
  const stage = req.body.stage
  const check = req.body.container

let blobName = ''
 if (check === 'image') {
  blobName = publisher + '/' + grade + '/' + subject + '/' + 'version' + version
} else {
  blobName = publisher + '/' + grade + '/' + subject + '/' + version + '/' + 'stage_' + stage
}

  return blobName
}

const containerName = (req, file) => {
  console.log(req.body)
const containerName = req.body.container
  return containerName
}

const azureStorage = new MulterAzureStorage({
  connectionString: connectionString,
  accessKey: accessKey,
  accountName: accountName,
  containerName,
  blobName,
  containerAccessLevel: 'blob',
  urlExpirationTime: 60
})
const upload = multer({
  storage: azureStorage
})

router.post('/', upload.any(), (req, res, next) => {
  res.send('ok')
})

vue

            const fd = new FormData()
            fd.append('blobData', this.blobData, { type: '*/*' })
            fd.append('container', 'test')
            fd.append('publisher', publisher)
            fd.append('grade', this.grade)
            fd.append('subject', this.subject)
            fd.append('version', this.version)
            fd.append('stage', this.stage)

            await this.$store.dispatch('MANAGER_CREAT_BOOK', fd)

actions.js

     const MANAGER_CREAT_BOOK = async ({ commit }, box) => {
      console.log(box, 'action')
      await managerCreateBoook(box)
    }

api.js

      function managerCreateBoook (box) {
       
        return instanceAuth.post('api/blob', box, { headers: { 'Content-Type': 'multipart/form-data' } })
      }
axios azure-blob-storage express
1 Answers

Regarding the issue, we need to reverse the order of my form object properties in the front end. Because when the multer populate req.body, it may depend on the order that the client transmits fields and files to the server.

For example Vue

<template>
  <div>
    <div class="container">
      <form @submit.prevent="handleSubmit">
        <div class="form-group">
          <input type="file" @change="uploadFile" />
        </div>

        <div class="form-group">
          <button class="btn btn-success btn-block btn-lg">Upload</button>
        </div>
      </form>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      file: null,
    };
  },
  methods: {
    uploadFile(event) {
      this.file = event.target.files[0];
    },
    handleSubmit() {
      const formData = new FormData();

      formData.append("container", "image");
      formData.append("publisher", "jim");
      formData.append("grade", "9");
      formData.append("version", "v1");
      formData.append("stage", "pub");
      formData.append("subject", "test");
      formData.append("file", this.file, { type: "*/*" });

      axios
        .post("", formData, {
          headers: { "Content-Type": "multipart/form-data" },
        })
        .then((res) => {
          console.log(res.statusText);
        })
        .catch((err) => {
          console.log(err);
          throw err;
        });
    },
  },
};
</script>

<style scoped lang="scss">
.container {
  max-width: 600px;
}
</style>

express upload

const blobName = (req, file) => {
  console.log(req.body);
  const publisher = req.body.publisher;
  const grade = req.body.grade;
  const subject = req.body.subject;
  const version = req.body.version;
  const stage = req.body.stage;
  const check = req.body.container;

  let blobName = "";
  if (check === "image") {
    blobName =
      publisher + "/" + grade + "/" + subject + "/" + "version" + version;
  } else {
    blobName =
      publisher +
      "/" +
      grade +
      "/" +
      subject +
      "/" +
      version +
      "/" +
      "stage_" +
      stage;
  }
  console.log("The blob name :" + blobName);
  return blobName;
};

const containerName = (req, file) => {
  console.log(req.body);
  const containerName = req.body.container;
  return containerName;
};

const azureStorage = new MulterAzureStorage({
  accessKey: accessKey,
  accountName: accountName,
  containerName,
  blobName,
  containerAccessLevel: "blob",
  urlExpirationTime: 60,
});
const upload = multer({
  storage: azureStorage,
});

router.post("/upload", upload.any(), (req, res, next) => {
  res.send("ok");
});

enter image description here enter image description here

user_105050400
Related