无法在 Vue 前端上传文件

Question

当我尝试使用 Vue 上传用户照片时，formData 似乎只是一个空对象。 Multer 中间件随后失败，因为它没有读取 req.file。

User.vue

<form enctype="multipart/form-data">
   <div class="pl-3 label">User Photo</div>
   <v-file-input
      accept='image/*'
      label="Upload Photo"
      v-model="photo"
    ></v-file-input>
    <v-btn class="mr-5" color="blue lighten-3" @click="submit">
        save changes
    </v-btn>

export default {
  data: () => ({
    photo: null
  }),
  methods: {
    submit() {
      let formData = new FormData();
      if (this.photo) {
        formData.append('photo', this.photo)
      }
      this.$store.dispatch('updateMe', {
        photo: formData
      });
    }
  }
};

Vuex 商店

export default new Vuex.Store({
  state: {
    photo: null
  },
  mutations: {
    setUpdatedUser(state, payload) {
      state.name = payload.name;
      state.email = payload.email;
      state.photo = payload.photo;
    }
  },
  actions: {
    async updateMe({ commit, getters }, payload) {
      let id = localStorage.getItem('userId');
      let user = {
        photo: payload.photo
      };
      try {
        let token = getters.token;
        const response = await axios.patch(
          `http://localhost:3000/api/v1/users/updateMe`,
          user,
          {
            headers: { Authorization: 'Bearer ' + token }
          }
        );
        commit('setUpdatedUser', response.data.updatedUser);
      } catch (err) {
        console.log(err);
      }
    }
  }

用户控制器

const multerStorage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, 'public/users');
  },
  filename: (req, file, cb) => {
    console.log(file)
    const ext = file.mimetype.split('/')[1];
    cb(null, `user-${req.user.id}-${Date.now()}.${ext}`);
  }
});

const multerFilter = (req, file, cb) => {
  if (file.mimetype.startsWith('image')) {
    cb(null, true);
  } else {
    cb(new AppError('Not an image. Please upload only images.', 400), false);
  }
};

const upload = multer({
  storage: multerStorage,
  fileFilter: multerFilter
});

exports.uploadUserPhoto = upload.single('photo');

我比较过的大多数其他示例都不使用 v-model 作为输入绑定。这有什么不同吗？

Answer 1

在我处理文件上传的应用程序中，文件被发布到节点后端。
我也在我的组件中 v-model 所以这应该不是问题。

前端方法：

upload() {
  const data = new FormData()
  data.append('file', this.file, this.file.name) // Filename is optional
  data.append('additionalInformation', this.additionalInformation)

  axios.
    post('/api/v1/upload/', data)
    .then(response => /* response handling */)
    .catch(error => /* error handling */)

}

节点端点如下所示：

app.post('/api/v1/upload/', multer().single('file'), (request, response) => {
  upload(request.body, request.file, response, config)
})

参考：FormData.append()

无法在 Vue 前端上传文件

Trouble uploading file in Vue frontend

upload

vue.js