解决element-ui和 vant两个组件库上传组件,上传图片后无法显示图片的问题

在使用Element-UI的组件时,可以通过file-list属性处理上传文件,将后端返回的图片地址存入url字段。若无地址,可使用window.URL.createObjectURL(file)生成链接。而对于Vant-UI的,除了url,还需添加isImage:true来标识图片。
摘要由CSDN通过智能技术生成

element-ui

在调用 <el-upload> 组件时,有一个file-list属性是上传的文件列表(数组对象),在上传成功后把数据存到里边,组件会读取对象里的url字段用来显示图片

所以,只需要让后端返回图片的地址然后放在url里即可,如果后端没有返回,那么我们可以利用文件内容生成图片链接即:{url: window.URL.createObjectURL(file)}

vant-ui

element-ui 同理,在用<van-uploader>组件时,v-model绑定的值是一个数组对象,在上传成功后,设置值时,除了要加url字段,还要加上isImage属性,即{...,isImage: true , url: window.URL.createObjectURL(file)}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值