1.antd官网Upload组件:
https://ant.design/components/upload-cn/
2.下图是最近开发的上传文档的效果:
3.文件上传的实现:
(1)方法一:antd默认上传。
a:渲染文件上传组件。getPDFURL()方法为实现文件的上传。showUploadList为是否展示 uploadList, true显示,false不显示,其可设为一个对象,用于单独设定 showPreviewIcon 和 showRemoveIcon。type为上传按钮的图标。如下图所示。
{/* 渲染文件上传组件 */}
<Upload {...this.getPdfURL()} showUploadList={false}>
<Button>
<Icon type="upload" /> 上传文件
</Button>
</Upload>
b:getPDFURL()方法为实现文件的上传。name是发到后台的文件参数名。action为上传文件的地址。accept是接受上传的文件类型。headers是设置上传的请求头部,IE10 以上有效。onChange是上传文件改变时的状态。代码如下图所示。
下面为代码:
getPdfURL = () =>{
const _this = this;
const props = {
name: 'file',
action: AjaxUrl + 'data/modelFileUpload.svt?cou_id=' + this.state.cou_id,{/*文件上传接口和需要的传参*/}
accept:"application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document",{/*接受上传的文件类型:此处为.doc格式*/}
headers: {
authorization: 'authorization-text',
},
onChange(info) {//上传文件改变时的状态
if (info.file.status !== 'uploading') {
console.log(info.file, info.fileList);
}
if (info.file.status === 'done') {
message.success(`${info.file.name} 上传成功!`);
_this.setState({
pdfUrl:AjaxUrl + info.file.response.url,
wordName:info.file.response.wordName
})
} else if (info.file.status === 'error') {
message.error(`${info.file.name} 上传失败!`);
}
},
};
return props;
}
注意:accept可以用于设置接口不同类型的文件类型,其不同文件类型设置可参考:https://www.haorooms.com/post/input_file_leixing
(2)方法二:使用customRequest通过覆盖默认的上传行为,自定义自己的上传实现。
a:渲染文件上传组件。accept是接受上传的文件类型。customRequest通过覆盖默认的上传行为,customRequest()方法是自定义自己的上传实现。fileList是已经上传的文件列表(受控)。
<Upload
accept="application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"
customRequest={this.customRequest}
beforeUpload = {this.beforeUpload}
fileList={this.state.fileList}
>
<Button>
<Icon type='upload' />上传
</Button>
</Upload>
b:customRequest()方法是自定义自己的上传实现。
customRequest = (option)=> {
const formData = new FormData();
const fileUrl = AjaxUrl+"data/fileUpload.svt";
formData.append('files[]',option.file);
reqwest({ /*官网解释:It's AJAX
All over again. Includes support
for xmlHttpRequest, JSONP, CORS,
and CommonJS Promises A.*/
url: fileUrl,
method: 'post',
processData: false,
data: formData,
success: (res) => {
//res为文件上传成功之后返回的信息,res.responseText为接口返回的值
let fileInfo = JSON.parse(res.responseText);
if(res){
this.setState({
fileInfo:fileInfo,
loading: false,
uploading: false,
defaultFile:false
})
}
},
error: () => {
this.setState({
loading: false,
uploading: false
})
message.error("文件上传失败!");
},
});
}
注意:reqwest其实就是ajax异步请求。更多了解参考: https://www.npmjs.com/package/reqwest
说明:上述内容均是自己在开发过程中总结出来,或许还有不足之处,但是希望有些内容能够帮到大家,谢谢观赏!