element ui背景图_vue项目elementUi照片墙图片预览

背景：后端返回的数据是个图片的url的数组，但是这个url是无法直接作为图片预览的,需要每次去调接口获取真正的url

一、template页面

id="selectfiles"

:file-list="filesList"

list-type="picture-card"

action="https://jsonplaceholder.typicode.com/posts/"

:on-preview="handlePictureCardPreview"

:on-remove="handleRemove"

:http-request="(file)=>myUploadPic( file,'fileUrl')"

:before-upload="beforeUpload"

multiple

二、js代码

getFiles() {

if (this.directProductForm.id) {

this.$http({

url: '/rental/rentalProjectTemplateFile/data',

method: 'post',

params: { 'rentalProjectTemplateId': this.directProductForm.id }

})

.then(res => {

if (res.code === 200) {

const that = this;

that.fileListLength = res.rows.length;

// 初始化fileLIst,这里使用map是为了避免出现填充的对象存在引用问题，

// 就是这三个对象其实是同一个对象，其中fileList就是照片墙绑定的数据

that.filesList = new Array(that.fileListLength).fill(null).map((item, index) =>

(item = { url: '', id: res.rows[index].id })

);

if (res.rows.length > 0) {

res.rows.map((item, index) => {

that.directProductForm.fileUrlList.push(item);

// 这个方法就是真正的查看图片的方法

that.getImgUrl(item.fileUrl, index);

return item;

});

}

} else {

this.$message(res.message);

}

})

.catch(error => {

this.$message(error);

});

}

getImgUrl(fileUrl, index) {

this.$http({

url: '/file/preview/getFileUrl',

method: 'get',

params: { 'url': fileUrl }

})

.then(res => {

const that = this;

if (res.code === 200) {

that.filesList[index].url = res.object;

} else {

this.$message(res.message);

}

})

.catch(error => {

this.$message(error);

});

return this.url;

}

element ui背景图_vue项目elementUi照片墙图片预览相关推荐

element ui背景图_vue+element-ui如何为元素设置背景图片
在元素标签里,直接: style="background-image:url('1.jpg')"//图片路径是不能显示图片的. 也不能直接background...,就是说不通过 ...
java后端项目怎么实现图片预览_项目经验不重样！3个基于 SpringBoot 的图片识别处理系统送给你！...
最近看了太多读者小伙伴的简历,发现各种商城/秒杀系统/在线教育系统真的是挺多的.推荐一下昨晚找的几个还不错的基于 Java 的图片识别处理系统. 中药图片拍照识别系统项目地址:https://git ...
element ui登录界面_Vue和Element-UI做一个简单的登录页面
如下所示,是vue+ElementUI写的一个登录页面: Login.vue部分 class="demo-ruleForm login-container"> 登陆界面记住 ...
若依前后端分离vue 中项目上线后图片预览无法显示问题
这里看到图片返回的url地址里面图片前缀名多了个 /prod - api 导致图片无法预览找到components 里面的imagetwo 里面的index.vue这里只需要在url上传图片组件 ...
element upload预览_vue2.0 使用element-ui里的upload组件实现图片预览效果方法
1.首先我们在cli中引入element-ui 2.然后在具体的代码中放入uoload组件点击上传只能上传jpg/png文件,且不超过500kb 3.使用element-ui的upload组件中提 ...
基于 vue 编写的vue图片预览组件，支持单图和多图预览，仅传入一个图片地址，即可实现图片预览效果，可自定义背景、按钮颜色等
hevue-img-preview 简介完整版下载地址:基于 vue 编写的vue图片预览组件本组件是一个基于 vue 编写的 vue 图片预览组件,支持 pc 和手机端,支持单图和多图预览,仅传 ...
vue h5 端实现富文本图片预览（基于 Vant UI 的 ImagePreview 组件）
文章目录 vue h5 端实现富文本图片预览(基于 Vant UI 的 ImagePreview 组件) 预览效果关键代码使用案例 vue h5 端实现富文本图片预览(基于 Vant UI 的 I ...
v-viewer预览图的使用（图片预览旋转/放大缩小/上下切换等）
前言: 之前项目需求,需要找一个预览图的组件,最开始,找了vue-preview组件.因为vue-preview是直接引入 < vue-preview>这个标签,无法看到对组件里面的图片i ...
小程序自定义图片预览和多图下载的实现
小程序开发中图片列表的需求再常见不过了,通常都会配合大图预览和图片下载的功能但是微信又没有提供可自定义的图片预览功能,有时候会有需求在预览大图的时候收藏或者下载啥的用 wx.previewImage ...

element ui背景图_vue项目elementUi照片墙图片预览

element ui背景图_vue项目elementUi照片墙图片预览相关推荐

最新文章

热门文章