VUE Ant Design Vue框架点击上传图片和预览大图
最近做了一个功能,上传图片,点击预览图片的一个功能,在之前的项目上开发的,用的是Ant Design Vue的这个框架,之前没用过这个框架,pc端用的比较多的是element-ui这个框架,而他们说一个项目不能用两个框架,那好,就只能硬着头皮去先熟悉这个框架,然后踩了很多坑
首先我们先找到这个框架,然后选择一种比较符合标准的
我用的是这一个,但是你们发现,我上传一个图片,然后边框是红色的,说明是错的,把这个框架提供的代码粘贴下来,点击上传图片也不行,后来去看了提供的方法,才知道有一个属性,action ,这个属性是图片上传的地址,而我把后台返回的地址复制给它,还是报错啦,下面我们来详细看一下
接着我先把框架提供的代码复制下来,然后修改一下
<a-upload
action="/person/uploadFile"
list-type="picture"
:remove="removeFile"
:default-file-list="fileList"
:customRequest="customRequest"
class="upload-list-inline"
>
<a-button>
<a-icon type="upload" />添加图片
</a-button>
</a-upload>
下面说一下fileList和customRequest这两个属性
- fileList:它是一个数组,里面放的是对象,里面包含的属性有图片的名称,图片的路径,点击放大图片的路径
- customRequest:这个属性官方的定义是 通过覆盖默认的上传行为,可以自定义自己的上传实现
一.fileList 首先我们现在data里面把他定义一下,要不然会报错
在这里插入代码片
```data() {
return {
fileList: [],
},
二:fileList接受数据
- 这个上传图片的功能不只是只能上传,而且还可以图片回显,就是请求接口,如果后台给你返回图片的路径,你还要展示出来,没有返回的话,就显示点击上传图片,所以在我们请求接口,返回数据的时候,我们要先拿到图片的路径
- 首先我们声明一下变量,接受一个对象,然后对象里面定义图片的信息,在我们请求接口拿到路径以后,给图片赋值,最后push到数组中
axios.post('/person/getUcUserByUserId?userId=' + sele.userIdVal).then(res => {
if (!res.data.card) {
sele.removeFile()
}
const originFileObj = {
uid: '-1',
name: '图片',//图片显示的名称
status: 'done',
url: res.data.card,//显示图片的路径
thumbUrl: res.data.card//点击放大图片的路径
}
sele.fileList.push(originFileObj)//最后要push到显示的这个数组中
三:customRequest:通过覆盖默认的上传行为,可以自定义自己的上传实现, 这个方法就是我们点击上传图片的方法
customRequest(data) {
const formData = new FormData()
formData.append('imageFile', data.file)
axios.post('/person/uploadFile', formData).then(res => {
if (res.code === '0') {
this.retrieval.card = res.data
const originFileObj = {
uid: '-1',
name: '图片',
status: 'done',
url: res.data,
thumbUrl: res.data
}
this.fileList.push(originFileObj)
this.$message.success(res.msg)
}
})
},
传递参数的时候转换了一下,因为后台这边接受的参数是form data的格式,正常的是json格式,通过下面的方法,转换成formdata格式,如果后台没有说要接受什么格式的参数,就不用写下面这个方法,不用转换,直接正常传参就行啦
const formData = new FormData()
formData.append('imageFile', data.file)
四:通过点击上传图片的这个方法,请求接口,拿到图片的路径,然后push到fileList展示图片的这个数组中,在我们请求接口的时候,拿到接口的后缀,要赋值给上面的action
五:removeFile:这个是删除的方法,当我们点击删除的时候,让fileList这个数组为空就可以啦
//删除的方法
removeFile() {
this.fileList = []
this.retrieval.card = ''
},