摘要：
参考地址：elementui的照片墙默认显示照片。显示的照片的数据格式为：[｛name:“”，url:“”｝]，：file list=“”默认图像。在实际项目开发中，需要解决两个问题：① 从后端返回的二进制数据被处理成由前图像识别的base64格式；② 如果从后端返回的数据不为空，将显示图片并隐藏上载按钮。只有在删除显示的图片后才能继续上载①: 有关处理方法，请参阅front imageBuffer设置
参考地址： element ui的照片墙 默认显示照片
照片显示的数据格式是：[{name: '', url: ''}]，:file-list=""默认显示的图片
实际项目开发中需要处理两个问题：① 从后端返回的二进制数据处理为前端image可识别的base64格式； ② 如果从后端返回的数据不为空，那么显示图片，并且隐藏上传按钮，只有当删除展示的图片后才可继续上传
问题①：处理方式可参照：前端imageBuffer设置图片src（后端返回二进制流图片）
问题②：处理方式如下：
// 页面架构 <tr> <td>项目截图：</td> <td> <el-upload action="" : :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 :src="http://t.zoukankan.com/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); // 隐藏上传按钮 });