Antd Upload 文件加密及分片上传实现逻辑

2022-09-05 08:55:53

更改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=newFormData();
        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=newSparkMD5.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(){};functionloadNext(){var fileReader=newFileReader();
                    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();returnfalse;},
            onRemove: file=>{this.setState(state=>{const index= state.fileList.indexOf(file);const newFileList= state.fileList.slice();
                    newFileList.splice(index,1);return{
                        fileList: newFileList,};});},
            fileList,}
  • 作者:老虎爱代码
  • 原文链接:https://blog.csdn.net/qq_34399969/article/details/107125010
    更新时间:2022-09-05 08:55:53