时间戳

首页 > 解决方案 > 无法使用 axios 将图像上传到外部 API

laravel - 无法使用 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
    ​&lt;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()
    ​​&lt;prototype>: Object { … }

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

我认为我的问题喜欢在我的 FormData 中，但它可能来自它从事件点击接收的变量。我没主意了。

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

标签： laravelvue.jsvuetify.js

解决方案

你有两个问题。

表单数据

您需要发送一个 FormData 对象，只发送一个 FormData 对象，并且只发送一个 FormData 对象。

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

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

内容类型

multipart/form-dataMIME 类型有一个强制参数 boundary。

你省略了它，但你无论如何也不知道它是什么。

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

推荐阅读