elementUi中的el-upload结合el-image预览图片

最新推荐文章于 2024-06-04 12:01:34 发布

anne都

最新推荐文章于 2024-06-04 12:01:34 发布

阅读量1.1k

点赞数 3

分类专栏： vue3 js 文章标签： elementui javascript vue.js

本文链接：https://blog.csdn.net/qq_36958916/article/details/127676130

版权

js 同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

9 篇文章 0 订阅

订阅专栏

关键代码

 <el-upload
                      action="underfine"
                      accept=".png,.jpg"
                      :disabled="scope.row.lockflagwfr==1?true:false"
                      :file-list="scope.row[item.fieldprop]"
                      list-type="picture-card"
                      :before-upload="(file)=>beforeUpload1(file,scope.row.id,item.fieldprop)"
                      :on-preview="handlePictureCardPreview"
                      :before-remove="(file)=>beforeRemove(file)"
                      :on-remove="(file)=>handleRemove1(file,scope.row.id,item.fieldprop)"
                      >
                      <i class="el-icon-plus"></i>
                    </el-upload>


 <el-image-viewer
        v-if="dialogVisible"
        :url-list="[dialogImageUrl]"
        :on-close="closeViewer"
      />

 components: {
    'el-image-viewer': () => import('element-ui/packages/image/src/image-viewer'),
    
    },

  //预览图片
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      // 关闭查看器
      closeViewer() {
        this.dialogVisible = false
      },