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

关键代码

 <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
      },