如何使用惯性js和laravel 8.0上传文件

Question

我有一个更新（补丁表），它可以包含一些基本字段，其中包含一个特色图像和一组图库图像。

updatePhotoPreview(event) {
   this.featuredImagePreview = URL.createObjectURL(event.target.files[0])
   this.updateProductForm.featured_image = event.target.files[0]
},

在发送请求之前，甚至在请求头中，特色图像是文件和二进制文件。

然后我只是用this.form.patch(url).

我收到一个错误，featured_image 必须是一个图像。

我已经放弃了请求，不知何故我的 features_image 值已经 设置为空数组。

对于图库图像也是如此，它已经变成了一个空数组的数组。

我已经尝试将路由更改为 post、put，结果是一样的，我添加了一个自定义标题

 { headers: {'Content-Type': 'multipart/form-data'} }

结果是一样的。

但是相同的表单正在使用 POST 方法用于此资源的创建端点。我已经删除了所有请求类并使用request()->all()

我怎样才能解决这个问题？

Answer 1

可以按照以下步骤通过 InertiaJS 和 Laravel 8 上传照片：

1. 在我们的 VueJS 组件中HTML：

<input type="file" class="hidden"
             ref="photo"
             @change="updatePreview">
<div v-show="preview">
  <span class="block w-20 h-20 rounded-full"
        :style="'width: 5rem; height: 5rem; border-radius: 999px; display: block; background-size: cover; background-repeat: no-repeat; background-position: center center; background-image: url(\'' + photoPreview + '\');'">
  </span>
</div>

2. 在我们的methods对象中：

updatePhotoPreview() {
    const reader = new FileReader();

    reader.onload = (e) => {
        this.preview = e.target.result;
    };

    reader.readAsDataURL(this.$refs.photo.files[0]);
},
storePhoto() {
    if (this.$refs.photo) {
        this.form.photo = this.$refs.photo.files[0]
    }

    this.form.post(route('photo.store'), {
        preserveScroll: true
    });
},

3. 在我们的data函数中：

data() {
   return {
       form: this.$inertia.form({
           '_method': 'PUT',
           photo: null,
       }, {
           resetOnSuccess: false,
       }),
       preview: null,
   }
},

4. 在我们的 Laravel 中Controller：

class PhotoController 
{
    public function store(array $input)
    {
        Validator::make($input, [
            'photo' => ['nullable', 'image', 'max:1024'],
        ]);

        if (isset($input['photo'])) {
           $photo->storePublicly();
        }
    }
}

Answer 2

我通过在表单上添加“_method”并使用“post”请求来解决此问题。

data() {
    return {
        form: this.$inertia.form({
            _method: "PUT",
        })
    };
},
methods: {
    submit(form) {
        this.form
            .post("route/id", form, {
                preserveState: true
        })
    }
}