参考地址: element ui的照片墙 默认显示照片

照片显示的数据格式是:[{name: '', url: ''}],:file-list=""默认显示的图片

实际项目开发中需要处理两个问题:① 从后端返回的二进制数据处理为前端image可识别的base64格式; ② 如果从后端返回的数据不为空,那么显示图片,并且隐藏上传按钮,只有当删除展示的图片后才可继续上传

问题①:处理方式可参照:前端imageBuffer设置图片src(后端返回二进制流图片)

问题②:处理方式如下:

// 页面架构
<tr>
<td>项目截图:</td>
<td>
<el-upload action="" :class="{hide: hideUpload}" :http-request="uploadScreenShot" list-type="picture-card" :before-upload="isPic" :on-preview="handlePictureCardPreview" :on-remove="screenShotRemove" :on-change="screenShotChange" :limit="1" :file-list="dialogImageUrlArray">
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
</td>
</tr>
data() {
return {
projectScreenShot: [], // 项目截图 - 用于存储url
dialogImageUrl: '', // 项目截图 - 图片的url
dialogImageUrlArray: [{ url: '' }], // 项目截图 - 图片的url
hideUpload: false, // 项目截图:是否隐藏上传按钮
dialogVisible: false,
}
}

如果限制只能上传1张图片,且图片上传成功后隐藏上传按钮,需要设置以下几个属性: :on-preview = ''、:on-remove =  ''、:on-change=''

// 项目截图:点击'放大'按钮,可以放大图片(点击文件列表中已上传的文件时的钩子)
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
// 项目截图:删除上传文件on-remove事件(文件列表移除文件时的钩子)
screenShotRemove(file, fileList) {
this.hideUpload = fileList >= 1; // 上传的项目截图 < 1时,显示上传按钮
},
// 项目截图:上传文件on-change事件(文件上传时的钩子)
screenShotChange(file, fileList) {
this.hideUpload = fileList.length >= 1; // 上传的项目截图 >= 1时,隐藏上传按钮
},

处理从后端返回的二进制数据,并把处理好的路径赋值给 this.dialogImageUrlArray[0].url ,隐藏上传按钮

// 获取'项目截图'的url
this.$http({
url: this.$http.adornUrl('/web/showimgFile'),
method: 'get',
responseType: "arraybuffer",
params: this.$http.adornParams({
'url' : infoModel.projectIndexUrl
})
}).then(({ data }) => {
let bytes = new Uint8Array(data);
let storeData = "";
let len = bytes.byteLength;
for (let i = 0; i < len; i++) {
  storeData += String.fromCharCode(bytes[i]);
}
this.dialogImageUrlArray[0].url = "data:image/png;base64," + window.btoa(storeData);
this.screenShotChange('', this.dialogImageUrlArray); // 隐藏上传按钮
});

element ui的照片墙 默认显示照片的更多相关文章

  1. element UI select 设定默认值

    要为select设定默认值,有两个步骤 1.数据中,声明一个变量param:该变量的值设为你想设定的select option中value 2.控件的 v-model 绑定 param 即可 < ...

  2. element UI 调整表格行高

    使用element UI的table默认属性,绘制表格如下: 该表格的行高太大了,于是想调小一些. 查看官网的文档,table有几个属性, row-style:行的 style 的回调方法,也可以使用 ...

  3. element ui 修改默认样式

    修改element ui默认的样式 如果要组件内全局修改 首先在浏览器里F12找到element默认的UI类名 找到要修改的默认类名以后 在文件中修改代码,重写属性 <style> .el ...

  4. element ui 1.4 升级到 2.0.11

    公司的框架 选取的是 花裤衩大神开源的 基于 element ui + Vue 的后台管理项目, 项目源码就不公开了,记录 分享下 步骤 1. 卸载 element ui 1.4的依赖包 2. 卸载完 ...

  5. Vue + Element UI项目初始化

    1.安装相关组件 1.1安装Node 检查本地是否安装node node -v 如果没有安装,从Node官网下载 1.2安装npm npm -v 如果没有安装:使用该指令安装: npm install ...

  6. 上传图片组件封装 element ui

    // element ui 文档地址: http://element.eleme.io/#/zh-CN <template> <div> <div class=" ...

  7. vue的$nextTick使用总结,this.$refs为undefined的解决办法,element Ui的树形控件setCheckedKeys方法无法使用

    其实这3个讲的是一个问题,先说下问题,我在watch里设置一个监听,当弹窗打开时,自动添加树形的默认选中项, 但奇怪的是this.$refs为undefined,自然setCheckedKeys无法使 ...

  8. element UI table 过滤 筛选问题

    一.问提描述    使用elementUI table 官方筛选案例,发现筛选不是服务器端筛选,而是浏览器端对每一页进行单独筛选. 如何在服务器端筛选? 二.查询Element UI 官网table组 ...

  9. Vue(十八)Element UI

    Elment UI 1. 简介 Element UI是饿了么团队提供的一套基于Vue2.0的组件库,可以快速搭建网站,提高开发效率 ElementUI PC端 MintUI 移动端 [官网](http ...

随机推荐

  1. Oracle关联删除的几种方式

    不多说了,我们来做实验吧. 创建如下表数据 select * from t1 ; select * from t2; 现需求:参照T2表,修改T1表,修改条件为两表的fname列内容一致. 方式1,u ...

  2. JAVA 基础编程练习题30 【程序 30 插入数字】

    30 [程序 30 插入数字] 题目:有一个已经排好序的数组.现输入一个数,要求按原来的规律将它插入数组中. 程序分析:首先判断此数是否大于最后一个数,然后再考虑插入中间的数的情况,插入后此元素之后的 ...

  3. composer全量镜像使用方法

    原文网址:https://pkg.phpcomposer.com/ Packagist 镜像使用方法 还没安装 Composer 吗?请往下看如何安装 Composer . 镜像用法 有两种方式启用本 ...

  4. (IStool)删除新版本已废弃但可能会影响新版本运行的文件夹/文件

    需求:老版本服务器的某些文件或文件夹在新版本已弃用,新版本覆盖安装时需要将文件夹或文件删除 实现:覆盖安装完成后将对应目录下的文件删除 [InstallDelete] Type: files; Nam ...

  5. javaweb期末项目-stage2-项目创建、配置、接口设计和功能实现(含核心源码)

    项目的创建.配置.接口设计和功能实现(含核心代码).rar--下载 说明:解压密码为袁老师的全名拼音(全小写) 相关链接: 项目结构:https://www.cnblogs.com/formyfish ...

  6. CentOS 7 利用qemu模拟ARM vexpress A9开发板

    听说qemu用于仿真arm很不错,今日就来试了一把.由于刚刚开始,了解的并不多.本文仅仅记录Qemu装载Linux kernel和busybox根文件系统的过程.后续将会深入了解仿真的其他内容. 先上 ...

  7. 实时监控服务器某个端口状态TCPing

    在给客户做运维服务期间,发现了一个奇怪的现象:备份系统(第三方国产)告警日志显示,每天晚上备份服务器的客户端在3点左右离线然后上线,再离线再上线,每晚两次,很是诡异. 联系了厂家技术支持,前后花了两天 ...

  8. AC自动机fail树上dfs序建线段树+动态memset清空

    题意:http://acm.hdu.edu.cn/showproblem.php?pid=4117 思路:https://blog.csdn.net/u013306830/article/detail ...

  9. php 连接webservice接口

    首先谢谢前人, 引用:https://www.cnblogs.com/xbxxf/p/10103430.html 本来说对接接口,我以为是一扮curl接口形式,结果最后给接口锝时候才告诉我是webse ...

  10. fiddler笔记:统计选项卡(Statistics)

    Request Count 选中的Session数. Bytes sent Http请求头和请求体中向外发送的字节总数. Bytes received HTTP请求头和请求体中接收到的所有字节数. R ...