react中使用fetch进行文件上传并与后台验证md5

项目有需要文件上传的功能，所以想用fetch来实现。样式方面用的是antd的upload组件，但网络请求没有用它本身的，因为请求数据方面还是得根据后台实际需求来。

<Upload {...props}>
   <Button type="primary">
     <Icon type="upload" /> 上传文件
   </Button>
</Upload>

在upload的beforeUpload获取file实例，然后通过fetch进行文件上传，代码如下：

const props = {
      onRemove: file => {
        this.setState(state => {
          const index = state.fileList.indexOf(file);
          const newFileList = state.fileList.slice();
          newFileList.splice(index, 1);
          return {
            fileList: newFileList,
          };
        });
      },
      beforeUpload: (file,fileList) => {
        const formData = new FormData();
        formData.append('file', file);
        // You can use any AJAX library you like
        const url= 'http://192.168.200.204:9000/eip-service-oss/minio/file'
        fetch(url, {
          method: 'POST',
          body: formData,
          headers: {
            // "Content-Type": "multipart/form-data",
            "Authorization": localStorage.getItem('token'),
          }
        }).then(response => response.json())
        .then(response => {
          if(response.code==200){
            message.success(`${response.data.originFileName} 文件上传成功`);
            Object.assign(file,{url:response.data.url},{fileName:response.data.fileName},{name1:response.data.originFileName})
            this.setState(state => ({
              fileList: [...state.fileList, file],
            }));
          }else{
            message.error(`${response.data.originFileName} 文件上传失败`); 
          }
        })
        .catch(error => console.log(error));
         return false;
      },
      fileList,
    };

验证md5是在react里面通过spark-md5生成文件的md5值，与传到服务器上的文件的md5值进行比对。

function get_filemd5sum(ofile,fileList) {
		var file = ofile;
		var tmp_md5;
		var blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice,
			// file = this.files[0],
			chunkSize = 8097152, // Read in chunks of 2MB
			chunks = Math.ceil(file.size / chunkSize),
			currentChunk = 0,
			spark = new SparkMD5.ArrayBuffer(),
			fileReader = new FileReader();
	
		fileReader.onload = function (e) {
			spark.append(e.target.result); // Append array buffer
			currentChunk++;
			var md5_progress = Math.floor((currentChunk / chunks) * 100);
			console.log(file.name + "  正在处理，请稍等," + "已完成" + md5_progress + "%");
			if (currentChunk < chunks) {
				console.log("1","1")
				loadNext();
			} else {
				tmp_md5 = spark.end();
				console.log(tmp_md5)
				console.log(file.name + "的MD5值是：" + tmp_md5)
				const formdata = new FormData();
				formdata.append('file', file);
				console.log("formData-------",formdata)
				
				const url = "/file/upload?file_md5="+tmp_md5;
				//const url = "http://192.168.200.204:9000/eip-service-oss/minio/file";
				//const url = "http://192.168.200.202:9999/file/upload";
				fetch(url, {
					method: 'POST',
					body: formdata,
					headers: {
						// "Content-Type": "multipart/form-data",
						"Authorization": localStorage.getItem('token'),
					}
				}).then(response => response.json())
				.then(data => {
					if(data.status==200){
						message.success(`${file.name} 文件上传成功`);
						handleSetFileName(data.message,fileList)     	
					}else{
						message.error(`${file.name} 文件上传失败`); 
					}
				})
				.catch(error => console.log(error));
			}
		};
		fileReader.onerror = function () {
			console.warn('oops, something went wrong.');
		};
		function loadNext() {
			var start = currentChunk * chunkSize,
				end = ((start + chunkSize) >= file.size) ? file.size : start + chunkSize;
			fileReader.readAsArrayBuffer(blobSlice.call(file, start, end));
		}
		loadNext();
	}

至此，文件上传并验证md5的功能就全部实现了。