无法使用axios将图像上传到外部API

如何解决无法使用axios将图像上传到外部API

我一直试图将带有axios的图像上传到外部（laravel）api，这一直给我带来噩梦。

恢复的模板：

<v-form>
    <v-file-input 
      label="Logo*" 
      v-model="image"
      accept="image/*"
      @change="onFileSelected"
      required
    ></v-file-input>
    <v-btn color="blue darken-1" text @click="createProvider">Create Provider</v-btn>
</v-form>

方法

methods: {
    onFileSelected (event) {
        this.selectedImage = event;
    },createProvider() {
        let formData = new FormData();
        formData.append("image",this.selectedImage,this.selectedImage.name);
    
        const config = {
            headers: {
                Authorization: this.token,'content-type': 'multipart/form-data'
            }
        };
    
        let imageData = {
            'image': formData,'name': 'Provider Image',// Required Field
        }
    
        axios.post('http://fake_external_url.com/api/images',imageData,config) // laravel API
            .then(console.log)
            .catch(console.log)
    },}

我得到的错误是：

错误：请求失败，状态码为422

请求响应：

[HTTP / 1.1 422不可处理实体1374ms]

 {"image":{},"name":"Image Provider"}

我看到图像没有收到任何东西。

如果我console.log this.selectedImage，我得到：

File { 
    name: "happy.jpg",lastModified: 1596711013544,webkitRelativePath: "",size: 41292,type: "image/jpeg" 
}

如果我用console.log FormData收拾垃圾

FormData
    ​<prototype>: FormDataPrototype
    ​​append: function append()
    ​​constructor: function ()
    ​​delete: function delete()
    ​​entries: function entries()
    ​​forEach: function forEach()
    ​​get: function get()
    ​​getAll: function getAll()
    ​​has: function has()
    ​​keys: function keys()
    ​​set: function set()
    ​​values: function values()
    ​​Symbol(Symbol.toStringTag): "FormData"
    ​​Symbol(Symbol.iterator): function entries()
    ​​<prototype>: Object { … } 

我的环境：XAMPP服务器上的localhost（也可以使用PHP artisan）。 Laravel，VueJS，Vuetify最新版本。

我认为我的问题很喜欢我的FormData，但这可能是由于它从事件点击中接收到的变量引起的。我没主意了。

[编辑]注意：使用POSTMAN时，我可以上传图像。 我之所以使用事件，而不是经典的event.target.files [0]，是因为console.log的响应中没有目标。

解决方法

您有两个问题。

FormData

您需要发送一个FormData对象，仅发送一个FormData对象，仅发送一个FormData对象。

如果要传递其他数据，则将其附加到FormData对象。

将FormData对象包装到另一个对象中，然后将其传递给（例如）JSON序列化器，只会破坏它。

内容类型

multipart/form-data MIME类型具有强制 boundary参数。

您已经省略了它，但是无论如何您都不知道它是什么。

请勿手动设置Content-Type标头。底层的XHR对象将从FormData对象读取它。