问答

vue使用elemenui upload 上传图片如何回显

作者:admin 2021-08-21 我要评论

使用elemenui回显服务器返回的图片数据,后台应该返回什么样的数据结构,在前端页面可以显示 后台给的数据 拿到数据后进行处理,但是只能展示一条数据,有三张图...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

使用elemenui回显服务器返回的图片数据,后台应该返回什么样的数据结构,在前端页面可以显示

image.png

后台给的数据

image.png

拿到数据后进行处理,但是只能展示一条数据,有三张图片

image.png

image.png

push 发在循环里面后

image.png

###

给个url就可以显示了

###

file-list绑定的变量是个数组,数组里面有 每个成员都有url,url是完整的图片路径就可以

所有url都是最后一个的原因是因为对象的属性是引用类型,指向地址。每次都用一个新对象就可以避免问题了

res.data.photoAlbum.forEach(item => {
    this.backImg.push({
        url: `${publicSrc}/head/${item}`
    })
});

如果解决了你的问题,请采纳~

###

对象在循环内定义

for(var i in res.data.photoAlbum){
var objA = new Object();
objA.url = ${publicSrc}/head/${res.data.photoAlbum[i]};
this.backImg.push(objA)
}

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • 使用箭头函数return数据不能实现

    使用箭头函数return数据不能实现

  • 个人小程序号能接入小程序3D地图吗?

    个人小程序号能接入小程序3D地图吗?

  • vue 移动端项目中,使用了better-scrol

    vue 移动端项目中,使用了better-scrol

  • css如何做出区域平均划分为四列

    css如何做出区域平均划分为四列

腾讯云代理商
海外云服务器