Question

我尝试使用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">

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

Answer 1

我怀疑图片是否附加到发送的请求，因为行formData.append('photo', this.newUser.photo);仅将文件的临时网址附加到formData，因为photo的属性{ {1}}对象已设置为FileReader newUser方法中文件的临时网址：onload。

您应该将文件附加到formData而不是临时网址

为此，您可能希望将vm.newUser.photo = e.target.result;功能更改为：

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); },在视图中的任何位置显示照片预览。

希望有所帮助：）

Answer 2

<强>解决

我只是删除了createImage(file)方法并更改了onFileChange(e)方法，如下所示：

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

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

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

2 个答案: