在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作为参数，而初始化请求是异步的，请求结束前就已经开始分片上传了，因此需要做一些处理
- 禁用plupload的自动上传，在beforeupload函数中 return false;
- 在异步请求的回调函数中修改文件状态：file.state = plupload.UPLOADING;
- 触发上传操作：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开始，做一些相应处理
});
},
