| antd upload支持文件格式：.rar、.zip、.doc、.docx、.pdf，不能大于200M | 您所在的位置：网站首页 › 上传pdf格式文件到web转圈 › antd upload支持文件格式：.rar、.zip、.doc、.docx、.pdf，不能大于200M |
antd upload支持文件格式：.rar、.zip、.doc、.docx、.pdf，不能大于200M
|
antd upload
相信大家在上传文件、头像、图片的时候，第一时间想到的都是antd upload。 下面是我从antd拿过来的upload的属性。 我们一般用来对于限制上传文件格式的属性是accept，但是在开发的过程中，博主发现了，accept对于.doc、.docx、.pdf、.png、.jpg、.rar，格式的限制是完全没有问题的。但是对于.zip的限制就有问题了，当我属性设置为 accept=".rar,.zip,.doc,.docx,.pdf"的时候，只要有.zip，上传文件的格式就会支持.xmind、.xlsx格式，上传的时候就不会报错，会上传成功，这肯定是不行的，这个时候，我们就需要在beforeUpload这个属性中去做上传文件的限制。 beforeUpload是upload上传文件之前的钩子，参数为上传的文件，若返回 false 则停止上传。我们在beforeUpload函数的file参数中可以获取上床文件的文件信息，这个时候我们就可以根据file里面的参数来进行判断。 注意：博主为什么要用file.name的后缀来匹配他的文件类型，也是是在是没有办法。file有个type属性，表示文件类型，但是docx后缀的文件没有type类型，为了支持上传docx文件，所以，只能用下面的方法来实现：代码如下： 通过file.type来判断上传文件类型（无法判断.docx文件） const isJpgOrPng = file.type === 'application/zip' || file.type === 'application/wps-writer' || file.type === 'application/pdf' || file.type === 'application/x-rar'; if (!isJpgOrPng) { message.error('仅支持文件格式：.rar、.zip、.doc、.docx、.pdf格式图片!'); this.onRemove(file); return } 通过file.name来判断上传文件类型（适用于所有文件） avatarBeforeUpload = file => { let fileType = file.name.split('.'); const fileDate = fileType.slice(-1); if (['zip', 'rar', 'doc', 'docx', 'pdf'].indexOf(fileDate[0]) file }) this.onRemove(file); return false } }; 限制上传文件大小不能大于200M同样是在beforeUpload里面来做限制，下面是支持文件格式：.rar、.zip、.doc、.docx、.pdf并且不能大于200M的代码 avatarBeforeUpload = file => { let fileType = file.name.split('.'); const fileDate = fileType.slice(-1); if (['zip', 'rar', 'doc', 'docx', 'pdf'].indexOf(fileDate[0]) file }) this.onRemove(file); return } const isLt200M = file.size / 1024 / 1024 file }) this.onRemove(file); return } return isLt200M; }; 限制上传文件大于200M并且不是.rar、.zip、.doc、.docx、.pdf的文件，不调用接口，只有满足条件的文件才能调用接口这里就用到了customRequest属性，customRequest是通过覆盖默认的上传行为，可以自定义自己的上传实现，我们在这里，可以对于调用接口和传参进行限制，代码如下： customRequest = async ({ action, method, file, onProgress, onSuccess, onError, }) => { // const { onChange } = this.props; const formData = new FormData(); formData.append('file', file); const fileData = this.state.file; // 当要上传的文件名和之前不满足条件的文件名进行匹配，相同的话，代码终止，不往下继续执行。 if(file.name == fileData.name){ return } try { const { data } = await axios.post(action, formData, { processData: false, noContentType: true, onUploadProgress: function (progressEvent) { if (progressEvent.lengthComputable) { let percent = Math.ceil((progressEvent.loaded / progressEvent.total) * 100); onProgress({ percent, }); } }, }); onSuccess(); // if (isFunction(onChange)) { // // onChange(data.data); this.props.form.setFieldsValue({ 'filePath': data.data }) // } this.setState({ file: {}, }) } catch (e) { console.log(e); onError(e); } } 调用后端接口删除文件实现这个功能就需要用到onChange，onChange上传中、完成、失败都会调用这个函数。 当info.file.status === "removed"状态时候，调用removeFile方法，删除文件**。onRemove点击移除文件时的回调，返回值为 false 时不移除。** 要实现删除文件这个功能这需要三个方法来互相配合，在avatarBeforeUpload方法中又看到调用onRemove方法，这时候，文件的状态会变成removed。在文件变化时，会去调用changeImg方法，在changeImg中，代码会走到info.file.status === “removed”，然后去调用删除文件接口，大功告成，代码如下： // 删除文件 removeFile = () => { const fileId = this.props.form.getFieldValue('filePath'); // console.log(fileId, 'fileId---') let params = { fileId: fileId, } axios.post("/api/tpc/tpc/expertJudgement/removeFile", params).then(res => { if (res.data.code == 200) { message.success(res.data.data || '删除成功') } else { message.error(res.data.message || '删除失败') } }).catch(err => { // console.log(err, 'err') }) }; //上传文件 changeImg = info => { // console.log(info, 'inf----') const { file } = this.state; let fileList = info.fileList.slice(-1);; fileList.forEach((file) => { if (file.response) { file.url = file.response.url; } }); const fileData = fileList.filter(item => item.name != file.name) this.setState({ fileList: fileList.filter(item => item.name != file.name) }, () => { }); if (info.file.status === "uploading") { this.setState({ loading: true }); return; } if (info.file.status === "removed") { this.removeFile(); this.setState({ loading: true }, () => { this.props.form.setFieldsValue({ 'filePath': undefined }) }); return false; } if (info.file.status === "done") { this.setState({ imageUrl: info.file.thumbUrl, loading: false, avatarFlag: true, }) } }; onRemove = (file) => { this.setState({ fileList: this.state.fileList.filter(item => item.name !== file.name) }, () => { this.props.form.setFieldsValue({ fileList: this.state.fileList }); }); } 只能上传一个文件（新上传的文件替换之前的文件）这时候就需要fileList这个属性了， fileList对列表进行完全控制，可以实现文件的自定义功能，上传列表数量的限制。 //上传文件 changeImg = info => { // console.log(info, 'inf----') const { file } = this.state; //*************上传一个文件，并且这个文件永远是最新上传的文件***************** let fileList = info.fileList.slice(-1);; fileList.forEach((file) => { if (file.response) { file.url = file.response.url; } }); const fileData = fileList.filter(item => item.name != file.name) this.setState({ fileList: fileList.filter(item => item.name != file.name) }, () => { //*************上传一个文件***************** if (info.file.status === "uploading") { this.setState({ loading: true }); return; } if (info.file.status === "removed") { this.removeFile(); this.setState({ loading: true }, () => { this.props.form.setFieldsValue({ 'filePath': undefined }) }); return false; } if (info.file.status === "done") { this.setState({ imageUrl: info.file.thumbUrl, loading: false, avatarFlag: true, }) } }; 完整代码如下 import React, { Component } from 'react'; import { Button, Form, message,Col, Upload, } from 'antd'; import { axios } from '@/utils/request'; import style from './index.less' const formItemLayout = { labelCol: { xs: { span: 20 }, sm: { span: 2 }, }, wrapperCol: { xs: { span: 20 }, sm: { span: 20 }, }, }; class add extends Component { constructor(props) { super(props); this.state = { fileList: [], file: '', detailDate: {}, // 详情 } this.formLayout = { labelCol: { span: 10 }, wrapperCol: { span: 14 }, }; // const } componentDidMount() { } //上传文件 changeImg = info => { // console.log(info, 'inf----') const { file } = this.state; let fileList = info.fileList.slice(-1);; fileList.forEach((file) => { if (file.response) { file.url = file.response.url; } }); const fileData = fileList.filter(item => item.name != file.name) this.setState({ fileList: fileList.filter(item => item.name != file.name) }, () => { // console.log(this.state.fileList, 'fileList----', file, 'fileData', fileData) // this.props.form.setFieldsValue({ fileList: fileList }); }); // this.setState({ // fileList: fileList // }); if (info.file.status === "uploading") { this.setState({ loading: true }); return; } if (info.file.status === "removed") { this.removeFile(); this.setState({ loading: true }, () => { this.props.form.setFieldsValue({ 'filePath': undefined }) }); return false; } if (info.file.status === "done") { this.setState({ imageUrl: info.file.thumbUrl, loading: false, avatarFlag: true, }) } }; customRequest = async ({ action, method, file, onProgress, onSuccess, onError, }) => { // const { onChange } = this.props; const formData = new FormData(); formData.append('file', file); const fileData = this.state.file; if (file.name == fileData.name) { return } try { const { data } = await axios.post(action, formData, { processData: false, noContentType: true, onUploadProgress: function (progressEvent) { if (progressEvent.lengthComputable) { let percent = Math.ceil((progressEvent.loaded / progressEvent.total) * 100); onProgress({ percent, }); } }, }); onSuccess(); // if (isFunction(onChange)) { // // onChange(data.data); this.props.form.setFieldsValue({ 'filePath': data.data }) // } this.setState({ file: {}, }) } catch (e) { console.log(e); onError(e); } } avatarBeforeUpload = file => { let fileType = file.name.split('.'); const fileDate = fileType.slice(-1); if (['zip', 'rar', 'doc', 'docx', 'pdf'].indexOf(fileDate[0]) file }) this.onRemove(file); return } const isLt1M = file.size / 1024 / 1024 avatarFlag: false, file }) this.onRemove(file); return } return isLt1M; // return isJpgOrPng && isLt1M; }; onRemove = (file) => { this.setState({ fileList: this.state.fileList.filter(item => item.name !== file.name) }, () => { this.props.form.setFieldsValue({ fileList: this.state.fileList }); }); } // 删除文件 removeFile = () => { const fileId = this.props.form.getFieldValue('filePath'); // console.log(fileId, 'fileId---') let params = { fileId: fileId, } axios.post(url, params).then(res => { if (res.data.code == 200) { message.success(res.data.data || '删除成功') } else { message.error(res.data.message || '删除失败') } }).catch(err => { // console.log(err, 'err') }) }; render() { const { form: { getFieldDecorator }, } = this.props; return ( style.exportAnswer}> 24}> {getFieldDecorator('filePath', { })( this.changeImg} multiple={false} method="POST" customRequest={this.customRequest} className='upload-list-inline' fileList={this.state.fileList} > 上传文件 )} ); } } export default Form.create()(add); |
【本文地址】
公司简介
联系我们