Antd Upload 文件加密及分片上传实现逻辑
更改Upload上传模式，改成手动上传文件
##变更为手动模式后，我们可以在Upload的beforeUpload里面对上传的文件进行切片和md5加密，吧切片和md5值放到state里面，然后我们在我们自定义的Button里的onClick事件里调用state值进行上传即可
<Upload {...props}>
<Button>
<UploadOutlined /> Select File
</Button>
</Upload>
<Button
type="primary"
onClick={this.handleUpload}
disabled={fileList.length === 0}
loading={uploading}
style={{ marginTop: 16 }}
>
{uploading ? 'Uploading' : 'Start Upload'}
</Button>
###自定义上传方法
handleUpload = () => {
const { fileList, md5, saveConfig } = this.state;
const formData = new FormData();
fileList.forEach(file => {
formData.append('file', file);
});
this.setState({
isUploading: true,
importLoading: true,
modalVisible: false,
ModalVisible2: true,
isUpload: false,
})
clearInterval(this.state.timer)
this.state.timer = setInterval(() => {
if (this.state.percent < 99) {
this.setState(
{
percent: this.state.percent + 1,
}, () => {
}
);
}
}, 5000);
reqwest({
url: '/api/system/SystemUpgrade',
method: 'post',
processData: false,
headers: { 'saveConfig': saveConfig?1:0, 'md5': md5 },
data: formData,
success: (res) => {
let message = formatMessage({id: "app.policy.msg.sys.success"})
this.setState({
isUpload: false,
isUploading: false,
importLoading: false,
loading: false,
percent: 100,
process_status: 'success',
uploadMessage: message,
fileList: [],
uploading: false,
})
setTimeout("window.location.href = '#/auth/login'",2000)
},
error: () => {
this.setState({
uploading: false,
});
this.setState({
isUpload: false,
isUploading: false,
importLoading: false,
loading: false,
process_status: 'exception',
fileList: [],
uploading: false,
percent: 100,
uploadMessage: formatMessage({ id: 'app.policy.msg.sys.fail' })
})
message.error(formatMessage({ 'id': 'app.policy.msg.sys.fail' }));
},
});
};
###定义Upload属性，对file进行处理，我这里只进行md5加密，因为后端采用了流式接受数据，所以前端未分片，分片可以在对文件进行分片md5加密时同时进行
const uploadProps = {
accept: '.gz',
showUploadList: true,
multiple: false,
beforeUpload: (file) => {
this.setState({
fileMessage: '',
})
if (file.type !== 'application/x-gzip') {
this.setState({
fileMessage: formatMessage({ 'id': 'app.policy.msg.file.error' }),
fileList: [],
uploading: false,
})
}
var fileMd5 = ''
var blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice,
chunkSize = 2097152, // 每次读取2MB
chunks = Math.ceil(file.size / chunkSize),
currentChunk = 0,
spark = new SparkMD5.ArrayBuffer(),
frOnload = (e) => {
spark.append(e.target.result);
currentChunk++;
if (currentChunk < chunks)
loadNext();
else {
###最后一个chunk
fileMd5 = spark.end()
this.setState(state => ({
md5: fileMd5,
fileList: [...state.fileList, file],
percent: 1,
uploadMessage: '',
process_status: '',
}));
}
},
frOnerror = function () {
};
function loadNext() {
var fileReader = new FileReader();
fileReader.onload = frOnload;
fileReader.onerror = frOnerror;
var start = currentChunk * chunkSize,
end = ((start + chunkSize) >= file.size) ? file.size : start + chunkSize;
fileReader.readAsArrayBuffer(blobSlice.call(file, start, end));
};
loadNext();
return false;
},
onRemove: file => {
this.setState(state => {
const index = state.fileList.indexOf(file);
const newFileList = state.fileList.slice();
newFileList.splice(index, 1);
return {
fileList: newFileList,
};
});
},
fileList,
}