react中antd Upload手动上传的示例
时间：2023-01-11 10:46:02|栏目：|点击： 次
情况介绍
在antd官方提供的upload组件案例中，都使用了action属性直接上传，唯一手动上传的一个例子（如下图）也不够好用，可能不能满足项目的需求，所以我们需要对其进行一些修改，并加入一些别的方法。
我们经常会使用antd的form表单上传数据，有时就会需要同时上传图片。所以在这里我们需要实现的是，前端页面上传多张图片时，先存储在前端，当表单上传时，和表单数据一起上传到后端。
实现方法
1.初始化
首先，在最前面引入upload组件，
import { Button, Form, Input, message, Upload} from 'antd';
然后在form中加入upload，
this.state = {
previewVisible: false,
previewImage: '',
fileList: [] //用来存图片列表
};
<Form.Item
name="files"
>
<Upload
listType="picture-card"
headers={{ 'content-type': 'multipart/form-data' }}
fileList={fileList} //存已上传到页面的图片列表
onPreview={this.handlePreview} //点击文件链接或预览图标时的回调
onChange={this.handleChange} //删除或者新上传时的回调
beforeUpload={() => false} //上传文件之前的钩子，参数为上传的文件，若返回 `false` 则停止上传。我们采用手动上传。
>
{fileList.length >= 1 ? null : (
<div>
<PlusOutlined />
<div style={{ marginTop: 8 }}>上传</div>
</div>
)}
</Upload>
</Form.Item>
handlePreview = (file) => {
this.setState({
previewImage: file.thumbUrl,
previewVisible: true
});
};
handleChange = ({ fileList }) => {
this.setState({ fileList });
};
2.上传表单和图片
这里我们统一使用json格式进行前后端的交互。由于在form表单中的图片格式是对象，但是我们不需要对象格式，我们需要的是fileList数组，所以，我们需要手动将每一张图片其加入到formData中。
onFinish = (values) => {
const { fileList } = this.state;
const formData = new FormData();
delete values.files; //删除表单内的图片对象
for (const key in values) {
if (values[key] !== undefined && values[key] !== null) {
formData.append(key, values[key]);
}
} //对于其他表单对象，可以直接上传
fileList.forEach((item) => formData.append('files', utils.transferFile(item.thumbUrl)));
};
3.图片回显
成功上传图片后，由于我这里后端给到前端的图片格式是base64，图片不能直接显示，但是还要考虑到，在编辑表单时，图片可能还会再上传，以下是我们的做法。 componentDidMount大家都知道是react生命周期在组件挂载在之后的函数吧，我们经常会将数据的一些预处理放在这里。
下面，我们首先需要调接口，获取后台数据。然后修改数据格式，将图片格式改成base64显示的格式，然后加入到fileList中，就可以将已经上传的图片重新加入到Upload组件中，实现回显。并且，后期再次上传时，也是可以的。
let { image } = res.data.data;
let imgArr = image.map((item) => {
return { thumbUrl: 'data:image/png;base64,' + item };
});
this.setState({
fileList: imgArr
});
