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" >
        </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);    // 隐藏上传按钮
});

原文地址：https://www.cnblogs.com/carriezhao/p/11429784.html