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的功能就全部實現了。