如何使用 Vue.js2 和 Laravel 5.4 上传文件？答案

【问题标题】：How to upload files with Vue.js2 and Laravel 5.4?如何使用 Vue.js2 和 Laravel 5.4 上传文件？
【发布时间】：2018-09-19 23:04:47
【问题描述】：

我正在尝试使用Laravel 作为后端和Vue.js2 作为前端来上传图像。

这是我的代码

addUser() {
    let formData = new FormData();
    formData.append('fullname', this.newUser.fullname);
    formData.append('email', this.newUser.email);
    formData.append('phone', this.newUser.phone);
    formData.append('photo', this.newUser.photo);
    formData.append('roles', this.newUser.roles);
    formData.append('permissions', this.newUser.permissions);

    axios.post('users', formData)
        .then((response) => {
            console.log(response);
         })
         .catch((error) => {
             console.log(error);
         });
    },

    onFileChange(e) {
        let files = e.target.files || e.dataTransfer.files;
        if (!files.length)
            return;
        this.createImage(files[0]);
    },

    createImage(file) {
        let reader = new FileReader();
        let vm = this;
        reader.onload = (e) => {
            vm.newUser.photo = e.target.result;
        };
        reader.readAsDataURL(file);
    },

和Laravel 后端代码：

if($request->hasFile('photo')) {
    return response()->json([
        'success' => true,
        'message' => 'Файл есть.',
        'data' => $request->all()
    ]);
}

return response()->json([
    'success' => true
]);

最后是html代码：

<input type="file" class="filestyle" data-text="Загрузите фото" @change="onFileChange">

不幸的是，它似乎不起作用。未找到文件。解决方法是什么？

【问题讨论】：

诊断问题的步骤：您是否确认文件已附加到请求中？您是否确认在您的后端命中了正确的端点？

标签： javascript php laravel vue.js vuejs2

【解决方案1】：

我怀疑图像是否附加到发送的请求中，因为 formData.append('photo', this.newUser.photo); 行仅将文件的临时 url 附加到 formData，因为 newUser 对象的属性 photo 设置为临时FileReader onload 方法中文件的 url：vm.newUser.photo = e.target.result;。

您应该将 file 附加到 formData 而不是 临时 url

为此，您可能需要将 createImage(file) 函数更改为：

createImage(file) {
   let reader = new FileReader();
   this.newUser.photo = file;
   let vm = this;
   reader.onload = (e) => {
      vm.newUser.photo_preview = e.target.result;
   };
   reader.readAsDataURL(file);
},

您可以使用this.newUser.photo_preview 在您喜欢的任何位置显示照片预览。

希望有帮助:)

【讨论】：

你找到解决办法了吗？

【解决方案2】：

已解决

我只是删除了createImage(file) 方法并像这样更改了onFileChange(e) 方法：

onFileChange(e) {
    let files = e.target.files || e.dataTransfer.files;
        if (!files.length)
            return;
        this.newUser.photo = files[0];
}

一切都很完美。 感谢大家花时间和帮助...）

【讨论】：