项目有需要文件上传的功能,所以想用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的功能就全部实现了。