Express vue使用axios将文件上载到azure blob，但不会从后端服务器接收到正文值

帮帮我

它的结构是这样的。在blob.js中 在blobName函数中，field正常返回，req.body不正常返回。我不知道为什么

将文件从后台服务器传输到ejs时，通常会收到req.body的值

谢谢

快车 blob.js

---

vue

---

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' } })
      }

---

关于这个问题，我们需要颠倒我的表单对象属性在前端的顺序。因为当

multer

填充

req.body

时，它可能取决于客户端向服务器传输字段和文件的顺序

比如说 Vue

---

如果它对您有用，您可以吗？

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

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

<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>

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");
});