zoukankan      html  css  js  c++  java
  • 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);    // 隐藏上传按钮
    });
  • 相关阅读:
    [转][黄忠成]Object Builder Application Block
    C#中的接口
    委托、事件与Observer设计模式
    [转][黄忠成]Object Builder Application Block (1)
    C# 中的委托和事件
    Android布局充分演示Demo
    android代码重启 .
    【转】小游戏>弹球
    多个Icon的APk——实现多程序入口总结
    为你的Android应用定制属于你的BaseActivity
  • 原文地址:https://www.cnblogs.com/carriezhao/p/11429784.html
Copyright © 2011-2022 走看看