Vue基础--封装el-upload的放大、下载、删除功能的实现

 

1、封装el-upload组件，一般放在components文件夹中：

<!--公共附件列表-->
<template>
  <div>
  <el-upload :action="baseApi+'/uploadFile?token='+token" :on-success="uploadsuccess" list-type="picture-card" :data="{'objId':objId}" :auto-upload="true" :file-list="urls">
                <i slot="default" class="el-icon-plus"></i>
                <div slot="file" slot-scope="{file}">
                  <img class="el-upload-list__item-thumbnail" :src="file.url" alt />
                  <span class="el-upload-list__item-actions">
                    <span
                      class="el-upload-list__item-preview"
                      @click="handlePictureCardPreview(file)"
                    >
                      <i class="el-icon-zoom-in"></i>
                    </span>
                    <span
                      v-if="!disabled"
                      class="el-upload-list__item-delete"
                      @click="handleDownload(file)"
                    >
                      <i class="el-icon-download"></i>
                    </span>
                    <span
                      v-if="!disabled"
                      class="el-upload-list__item-delete"
                      @click="handleRemove(file)"
                    >
                      <i class="el-icon-delete"></i>
                    </span>
                  </span>
                </div>
              </el-upload>
    <el-dialog class="upload-img" append-to-body :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl"  />
    </el-dialog>
    </div>
</template>

<script>

import { mapGetters } from 'vuex';

import request from "@/utils/request";


export default {
  name: "images",

  data() {
    return {
    objId:"",
    dialogVisible:false,
    dialogImageUrl:'',
     urls:[]
    }
  },
  computed: {
    ...mapGetters([
      'baseApi',
      'token'
    ])
  },
  created() {
  
    
  },
  methods: {
   handleRemove(file) {
        request({
          url: "/fileUpload/delete?objId="+file.objId,
          method: "get"
        }).then((data) => {
          if (data.successful) {
            this.$notify({
              title: "刪除成功！",
              type: "success",
              duration: 2500,
            });
            var  index=0;
            var datas=this.urls;
            datas.forEach(url => {
              if(url.objId==file.objId){
                this.urls.splice(index,1);
                return;
              }
              index++;
            });

          } else {
            this.$notify({
              title: "刪除失败！",
              type: "fail",
              duration: 2500,
            });
          }
        });
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleDownload(file) {
      let a = document.createElement('a')
        a.href =file.url;
        a.click();
      
    },
    uploadsuccess(response, file, fileList){
        if(response.length>1){
            file.objId=response;
            file.url=this.baseApi+"/fileUpload/showImgByGgfjObjId?token="+this.token+"&ggfjObjId="+response;
            this.urls.push(file);
        }
    },
    initimages(objid){
        this.urls=[];
        this.objId=objid;
        request({
          url: "/lujing/querybywjllid?ssjlid="+objid,
          method: "get"
        }).then((data) => {
          if (data.successful) {
             var fjs=data.resultValue.items;
           fjs.forEach(fj => {
                var obj={url:this.baseApi+"/fileUpload/showImgByGgfjObjId?token="+this.token+"&ggfjObjId="+fj.objId,objId:fj.objId}
                console.log(obj);
                this.urls.push(obj);
            });

          } else {
            this.$notify({
              title: "查询失败！",
              type: "fail",
              duration: 2500,
            });
          }
        });
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

</style>

2、在文件中引入：

<template>
    <div>
        <el-row>
          <el-col :span="24">
            <el-form-item label="隐患照片：">
              <images ref="images" :imagesparams="imagesparams" :isInfo="false"></images>
            </el-form-item>
          </el-col>
        </el-row>

    </div>
</template>

<script>

  export default {
      name: "Yhdj",
      components: {images},
      data() {
        return {
            imagesparams:{}
        }

    }
</script>

图片放大效果：