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 值已设置为空数组。

画廊图像也是如此，它已变成一个空数组数组。

我已经尝试将路由更改为发布，放置，结果是一样的，我添加了一个自定义标题

 { 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”并使用“发布”请求来解决此问题。

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

Answer 3

使用表单数据

const fd = new FormData()

fd.append('file', this.form.file)

this.$inertia.post(route('file.register'), fd)

Answer 4

var data = new FormData()
data.append('first_name', first_name || '')
data.append('last_name', last_name || '')
data.append('email', email || '')
data.append('password', password || '')
data.append('photo', photo || '')

Inertia.post('/users', data)

尝试这个。只需使用 FormData() 实例化

请参考文档https://inertiajs.com/forms#file-uploads