element ui的照片墙 默认显示照片
参考地址: 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); // 隐藏上传按钮 });