这里我们介绍的是先上传再下载的情况
1.首先我们需要一个Upload组件
给它传入的props有很多,包括
const props = {
name : 'file',
action : `${url}/api/files/upload`,
listType : 'text',
data : {
token : sessionStorage.getItem('token'),
},
defaultFileList : files,
onChange : this.handleChange,
onPreview : this.downLoadFile,
onRemove : this.onRemoveFile,
beforeUpload:this.handleBeforeCheck,
accept:".doc,.docx,.png,.xls,xlsx,.png,application/msword,application/" +
"vnd.openxmlformats-officedocument.wordprocessingml.document",
};
其中加入了一个文件变化时的回调,是因为项目的具体需求,需要向后端传送上传的文件id;
onPreview中就包含了下载文件时需要发送的请求
downLoadFile = (file) => {
const {dispatch} = this.props;
dispatch({
type : 'personalProjectModal/downLoadFile',
payload : {
md5 : file.md5,
fileName : file.name,
},
});
};
在model中我们需要发送请求,同时saveFile的原因,是因为我们希望一点击就能够下载文件,所以在saveFile中我们通过createEvent,给link元素添加了一个事件。
* downLoadFile({ payload }, { call, put }) {
const{md5,fileName:downLoadFileName}=payload;
const response = yield call(fileService.downloadFile, payload);
yield put({type: 'saveFile', payload: {blob: response.resultData, fileName:downLoadFileName }})
},
* saveFile({ payload: {blob, fileName}}, { call }) {
if (window.navigator.msSaveOrOpenBlob) {
navigator.msSaveBlob(blob, fileName);
} else {
var link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
link.download = fileName;
//此写法兼容可火狐浏览器
document.body.appendChild(link);
var evt = document.createEvent("MouseEvents");
evt.initEvent("click", false, false);
link.dispatchEvent(evt);
document.body.removeChild(link);
}
},