如何使用 vuejs 和 axios 在 api 请求中使用 formData() 发送文件

Question

我想通过 API 将文件上传到服务器。在 documenter.getpostman 上，这是如何使用 API

--form 'type="1"' \
--form 'user_id="1"' \
--form 'file=@"/C:/Users/xxx/Downloads/xxx.postman_collection.json"'

这就是我所做的


                try {
                    const fd = new FormData()
                    fd.append('file', this.dropFiles)
                
                    let response = await this.$axios.post('/staff/customer/add/document', {
                        type: this.uploadType,
                        user_id: this.user_id,
                        file: fd,
                    })

                    console.log(response.data.success)    
                }
                catch(err){
                     console.log(err)
                }

this.dropFiles 包含来自 input type="file" 的文件，当我将它登录到控制台时我能够看到它的内容，但是记录 fd 携带表单数据总是 returns 一个空对象。 type: this.uploadType, user_id: this.user_id 是我发送给 api

的其他参数

请求总是returns 400（错误请求）

Error: Request failed with status code 400
    at createError (createError.js?2d83:16)
    at settle (settle.js?467f:17)
    at XMLHttpRequest.onloadend (xhr.js?b50d:54)

我不确定 API 是否需要文件路径，因为，我试过像这样将文件路径硬编码到请求中

let response = await this.$axios.post('/staff/customer/add/document', {
    type: this.uploadType,
    user_id: this.user_id,
    file: '/home/myDevice/Downloads/download.jpeg',
})

但仍然得到相同的响应。我需要我能得到的所有帮助，谢谢。

Answer 1

使用@CBroe 评论解决了这个问题。我将 type 和 user_id 都附加到 formData 中，然后传入 formData 对象。

                try {
                    const fd = new FormData()
                    fd.append('file', this.dropFiles)
                    fd.append('type', this.uploadType)
                    fd.append('name', this.fileName)
                    fd.append('user_id', this.user_id)
                
                    let response = await this.$axios.post('/staff/customer/add/document', fd)

                    console.log(response.data.success)    
                }
                catch(err){
                     console.log(err)
                }

如何使用 vuejs 和 axios 在 api 请求中使用 formData() 发送文件

how to send files using formData() in an api request using vuejs and axios

javascript

form-data

vue.js

axios