plupload 分片上传

在react 文件中引入plupload

import plupload from 'plupload';

1. plupload 分片上传基础配置

pluploader = new plupload.Uploader({
      browse_button: 'upload_area',  // 上传按钮id

      chunk_size: '100mb', // 分片大小

      max_retries: 20, // 失败后重试次数

      drop_element: 'upload_area', // 拖拽范围的id

      url: uploadChunkURL, // 分片上传url

      file_data_name: 'chunk_data', // 上传文件参数名
}

2. 开始上传前接收服务端的返回结果并作为分片上传的参数

由于分片上传需要传初始化上传结果中的文件id作为参数，而初始化请求是异步的，请求结束前就已经开始分片上传了，因此需要做一些处理

1. 禁用plupload的自动上传，在beforeupload函数中 return false;
2. 在异步请求的回调函数中修改文件状态：file.state = plupload.UPLOADING;
3. 触发上传操作：uploader.trigger('UploadFile', file)
   具体实现代码如下：

BeforeUpload(uploader, file) {
          const {form} = that.props;
          const ToolTemplateID = form.getFieldValue('ToolTemplateID');
          const {name, size} = file;
          const {chunk_size} = uploader.settings;
          // 上传初始化参数
          const fileParams = {
            file_name: name, // 文件名
            file_size: size, // 文件大小
            chunk_size, // 分片大小
            file_chunk_total_number: Math.ceil(size / chunk_size), // 分片总数
            template_name: ToolTemplateID, // 其他必须参数
          };
          /* *
          * request: （FUNCTION）封装好的fetch请求
          * @fileInitURL: (STRING) 上传初始化URL
          * */
          request(fileInitURL, {
            method: 'POST',
            body: transObjToFormdata(fileParams),
          }).then(response => {
            if (response && response.success) {
              uploader.setOption('multipart_params', {
                UUID: response.UUID,
              });
              file.status = plupload.UPLOADING; // 修改文件状态
              uploader.trigger('UploadFile', file); // 触发上传操作
            } else {
              notifyError(`${name} 上传初始化失败`, null);
            }
          });
          return false;
        },

3. 分片上传

上传开始前将初始化上传返回的结果放到分片上传参数中，用服务端定义的字段存储响应分片信息

BeforeChunkUpload(uploader, file, args, chunkBlob) {
          const {multipart_params} = uploader.settings;
          uploader.setOption('multipart_params', {
            ...multipart_params,
            chunk_size: chunkBlob.size, // 服务端分片大小字段chunk_size
            chunk_data: chunkBlob, // 服务端分片二进制文件字段chunk_data
            chunk_index: args.chunk + 1, // plupload分片下表从0开始，服务端从1开始，做一些相应处理
          });
        },