如何用xmlhttprequest实现大文件上传和断点续传

Posted 2023-05-08

参考技术A H5支持XMLHttpRequest对象，能够实现断店续传。我说一下我的思路吧：首先获取文件的MD5（spark-md5.js），然后利用文件对象的slice方法进行切割文件，分段上传到后台，后台组装文件然后校验MD5值；我也刚好在做，觉得可行本回答被提问者采纳

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

【中文标题】如何用惯性js和laravel 8.0上传文件

【英文标题】：How to upload files with inertia js and laravel 8.0

【发布时间】：2021-01-23 20:26:50

【问题描述】：

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

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

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

然后我只是用this.form.patch(url) 发布表单。

我收到一个错误，特色图片必须是图片。

我已经转储了请求，并且不知何故我的 features_image 值已将 设置为一个空数组。

画廊图片也是如此，它已经变成了一个空数组的数组。

我试过改路由post，put，结果还是一样，我加了自定义header

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

结果是一样的。

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

我该如何解决这个问题？

【参考方案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();
        
    

【讨论】：

与form.post 完美搭配，并将'_method': 'PUT' 添加到参数中。谢谢！

总是乐于帮助@MrEduar！ :)

【参考方案2】：

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

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

【参考方案3】：

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

【参考方案4】：

使用表单数据

const fd = new FormData()

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

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