react结合ant design做图片批量上传,使用的是ant design的Upload组件。
操作:点击上传图片按钮,批量选中图片,确认上传。
这个时候,antd的处理是,依次上传图片,一张图片调一次接口,选中8张图片,就会调用8次文件上传的接口,现在由于上传调用接口次数较多,于是准备改造成批量选中图片只调用一次接口,仍然用antd的Upload组件实现。
上传图片的时候,会把批量选中的图片放到一个数组中,所以上传前就可以拿到批量选好的图片,这个时候,声明一个布尔变量isUpload,判断是否调用过一次上传接口,未调用的话,就把拿到的所有图片数组作为参数,调用上传接口,然后将isUpload置为true;如果已调用的话,就不再调用了。这样就可以实现批量上传调用一次接口。
//上传文件过程中 uploadImg = (file, fileList) => { this.setState({ filesSinning: true, files: [...fileList], isUpload: true }); }; // 上传文件 uploadFiles = () => { if (this.state.isUpload) { this.upload() } this.setState({ isUpload: false }); } // 上传调接口 upload = () => { new Promise((resolve) => { const { dispatch, location: { query: { id }, }, } = this.props; const { files } = this.state const formData = new FormData(); let SumSize = 0; files.forEach(file => { SumSize += file.size formData.append('files', file); }) formData.append('module', 'CLAIMCOMPLETE'); formData.append('id', id); const fileCount = files.length > 20; // 文件数 const fileNameLength = files.some(file => file.name.length > 100); // 文件名长度 const fileSize = files.some(file => file.size / 1024 / 1024 > 50); // 单个文件大小 const fileTotalSize = SumSize / 1024 / 1024 > 100; // 批量上传文件的总大小 if (fileCount || fileNameLength || fileSize || fileTotalSize) { this.setState({ filesSinning: false, }); } if (fileCount) { message.warning('文件数不能超过20'); return } if (fileNameLength) { message.warning('文件名长度不能超过100个字符'); return } if (fileSize) { message.warning('单个文件大小不能超过50MB'); return } if (fileTotalSize) { message.warning('文件总大小不能超过100MB'); return } dispatch({ type: 'claim/uploadManyFile', payload: formData, callback: (res) => { if (res) { message.success('上传成功', 2); this.setState({ filesSinning: false, }); this.getDetailData(); } else { this.setState({ filesSinning: false, }); message.error(res.msg, 2); resolve(res); return; } }, }).catch((err) => { this.setState({ filesSinning: false, }); message.error(err, 2); this.getDetailData(); }); }) } // 删除文件 deleteFile = (v) => { const { dispatch } = this.props; Modal.confirm({ title: '提示', content: '你确定要删除这个文件吗?', okText: '确认', cancelText: '取消', onOk: () => { dispatch({ // type为-命名空间+models里面设置的名字 type: 'claim/deleteFile', payload: { id: parseInt(v.uid), module: 'CLAIM' }, callback: (data) => { if (data) { setTimeout(() => { message.success('删除成功', 2); }, 500); this.getDetailData(); } }, }); }, }); };
<Upload listType="picture" className="upload-list-inline" multiple accept=".png,.jpg,.jpeg,.pdf" onChange={this.uploadFiles} fileList={filesList} beforeUpload={this.uploadImg} onPreview={this.handlePreview} onRemove={this.deleteFile} customRequest={() => { }} > <div className={styles.uploadBtn}>上传</div> </Upload>