目录
- 情况介绍
- 实现方法
- 1.初始化
- 2.上传表单和图片
- 3.图片回显
情况介绍
在antd官方提供的upload组件案例中,都使用了action属性直接上传,唯一手动上传的一个例子(如下图)也不够好用,可能不能满足项目的需求,所以我们需要对其进行一些修改,并加入一些别的方法。
我们经常会使用antd的form表单上传数据,有时就会需要同时上传图片。所以在这里我们需要实现的是,前端页面上传多张图片时,先存储在前端,当表单上传时,和表单数据一起上传到后端。
实现方法
1.初始化
首先,在最前面引入upload组件,
import { Button, Form, Input, message, Upload} from 'antd';
然后在form中加入upload,
this.state = { previewVisible: false, previewImage: '', fileList: [] //用来存图片列表 };
name="files" > handlePreview = (file) => { this.setState({ previewImage: file.thumbUrl, previewVisible: true }); };handleChange = ({ fileList }) => { this.setState({ fileList }); }; 这里我们统一使用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 } } //对于其他表单对象,可以直接上传 fileList.forEach((item) => formData.append('files', utils.transferFile(item.thumbUrl))); }; 成功上传图片后,由于我这里后端给到前端的图片格式是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 });
2.上传表单和图片
3.图片回显