laravel - 如何使用惯性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 上传照片:

在我们 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>

在我们的 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
    });
},

在我们的 data功能:

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

在我们的 Laravel Controller :

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

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