无法使用 axios 将图像上传到外部 API [英] Can't upload image to a external API using axios

问题描述

我一直在尝试将带有 axios 的图像上传到外部(laravel)api，但它让我做噩梦.

I've been trying to upload an image with axios to an external (laravel) api and it's been giving me nightmares.

恢复模板:

<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

Error: Request failed with status code 422

请求响应:

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

[HTTP/1.1 422 Unprocessable Entity 1374ms]

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

我看到图像没有收到任何信息.

I see that the image is not receiving anything.

如果我 console.log this.selectedImage 我得到:

If I console.log this.selectedImage I get:

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

如果我使用 console.log FormData 我会得到废话

If I console.log FormData I get crap

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 服务器上的本地主机(也可以使用 php artisan 服务).Laravel、VueJS、Vuetify 最新版本.

My environment: localhost on a XAMPP server (php artisan serve as well). Laravel, VueJS, Vuetify latest versions.

我认为我的问题在我的 FormData 中，但它可能来自它从事件点击接收的变量.我没有想法.

I think my problem likes in my FormData, but it may be from the variables that it's receiving from the event click. I am out of ideas.

注意:我可以在使用 POSTMAN 时上传图片.我使用事件而不是经典的 event.target.files[0] 的原因是因为 console.log 的响应中没有目标.

Note: I am able to upload image when using POSTMAN. The reason why I am using event, and not the classic event.target.files[0] it's because there is no target in the response from the console.log.

推荐答案

你有两个问题.

你需要发送一个FormData对象，只有一个FormData对象，除了一个FormData对象什么都没有.

You need to send a FormData object, only a FormData object, and nothing but a FormData object.

如果您想传递其他数据，请将其附加到 FormData 对象中.

If you want to pass additional data, then append it to the FormData object.

将 FormData 对象包装在另一个对象中并将其传递给(例如)JSON 序列化程序只会破坏它.

Wrapping the FormData object in another object and passing it to (for example) a JSON serializer will just break it.

multipart/form-data MIME 类型有一个 强制 boundary 参数.

The multipart/form-data MIME type has a mandatory boundary parameter.

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

You have omitted it, but you can't know what it is anyway.

不要手动设置 Content-Type 标头.底层 XHR 对象将从 FormData 对象中读取它.

Do not set the Content-Type header manually. The underlying XHR object will read it from the FormData object.

这篇关于无法使用 axios 将图像上传到外部 API的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！