基于el-upload封装的多文件和图片上传、删除、下载组件

一、上传图片组件

1、组件的封装MultipleImgUpload

<template>
  <div class='MultipleImgUpload'>
    <div style="display:inline-block;">
      <el-upload action="#" list-type="picture-card" :show-file-list="false" :http-request="handleUploadRequest"
        :limit='5'>
        <i class="el-icon-plus"></i>
      </el-upload>
    </div>
    <div class="color-item" v-for="(item,index) in fileList" @dblclick='dblclick(index)' :key="index">
      <img :src="item.url" alt="" srcset="">
    </div>
    <div class="tips">TIPS：（最多可以上传5张图片，双击可删除）</div>
  </div>
</template>

<script>
import { fileUploadOne } from "@/api/cbd.js"
export default {
  name: "",
  props: {
    // 图片上传的列表
    fileList: {
      type: Array,
      default() {
        return []
      },
    },
  },
  data() {
    return {
      sonFileList: [], //详情图图片数组
    }
  },
  mounted() {
    this.sonFileList = this.fileList
    // console.log("子接收图片：", this.sonFileList)
  },
  methods: {
    //图片上传
    handleUploadRequest(item) {
      const formData = new FormData()
      formData.append("file", item.file)
      fileUploadOne(formData)
        .then((res) => {
          if (res.success) {
            this.$message.success("上传成功！")
            this.fileList.push({ url: res.data })
            this.$emit("sendImgs", this.fileList)
          }
        })
        .catch(() => {
          this.$message.error("上传失败，请重新上传")
        })
    },
    //双击删除多图
    dblclick(e) {
      //双击删除
      this.fileList.splice(e, 1)
      this.$emit("sendImgs", this.fileList)
    },
  },
}
</script>

<style scoped lang='scss'>
.tips {
  font-size: 12px;
  margin-bottom: 20px;
  color: #666;
}

/* 多张 */
>>> .el-upload--picture-card {
  width: 100px !important;
  height: 100px !important;
  line-height: 100px !important;
}
.color-item {
  display: inline-block;
  float: left;
  border: 1px dashed #ddd;
  margin: 5px 5px 0 0;
  padding: 1px;

  img {
    width: 90px;
    height: 90px;
  }
}
</style>

2图片组件的使用MultipleImgUpload

<template>
  <div class="test">
    <el-form-item label="工作图片" :label-width="formLabelWidth">
      <MultipleImgUpload :fileList="picList" @sendImgs="receiveImgs">
      </MultipleImgUpload>
    </el-form-item>
  </div>
</template>

<script>
import MultipleImgUpload from "@/components/MultipleImgUpload"; //图片组件
export default {
  name: "",
  data() {
    return {
      picList: [] //图片列表
    };
  },
  components: {
    MultipleImgUpload
  },
  methods: {
    // 接收图片
    receiveImgs(imgs) {
      this.picList = imgs;
    }
  }
};
</script>

二、上传文件组件

1、组件的封装MultipleFileUploadDown

<template>
  <!-- 文件上传，可点击下载 -->
  <div class="FileUploadDown">
    <el-upload class="upload-demo" :show-file-list="false" :action="uploadUrl" :file-list="fileList"
      :http-request="handleUploadRequest">
      <el-button size="small" type="primary" icon="el-icon-upload">点击上传</el-button>
      <!-- <div slot="tip" class="el-upload__tip">支持拓展名:.rar .zip .doc .docx .pdf</div> -->
    </el-upload>
    <div class="FileList" v-for="(item,index) in sonFileList" :key="index">
      <div>
        <el-popover placement="top-start" title width="200" trigger="hover" content="点击文件可以下载当前文件">
          <i class="el-icon-document" slot="reference" style="color:#55a8fd"></i>
        </el-popover>
        <span style="color:#55a8fd;margin:0 50px 0 10px;font-size:13px">
          <a style="color:#55a8fd" :href="item.url" target="_blank">{{item.name}}</a>
        </span>
        <i class="el-icon-circle-close" style="color:#55a8fd" @click="deleteFile(index)"></i>
      </div>
    </div>
  </div>
</template>

<script>
import { fileUploadOne } from "@/api/cbd.js"
export default {
  name: "",
  props: {
    // 文件上传类型，如区分不同验收项目
    fileType: {
      type: String,
      default: "",
    },
    // 文件上传的列表
    fileList: {
      type: Array,
      default() {
        return []
      },
    },
  },
  data() {
    return {
      uploadUrl: "", //上传地址
      sonFileList: [], //文件列表
    }
  },
  mounted() {
    this.sonFileList = this.fileList
    // console.log("子接收文件：", this.sonFileList)
  },
  watch: {
    // 监测变化
    fileList: function (val) {
      this.sonFileList = this.fileList
    },
  },
  computed: {},
  components: {},
  methods: {
    //上传图片
    handleUploadRequest(fileOption) {
      console.log("111", fileOption)
      var filename = fileOption.file.name
      console.log("文件名称1", filename)
      const uploadFile = fileOption.file
      const formData = new FormData()
      formData.append("file", uploadFile)
      fileUploadOne(formData)
        .then((res) => {
          if (res.success == true) {
            this.$message.success("上传成功！")
            let oneFile = {
              name: filename,
              url: res.data,
            }
            this.sonFileList.push(oneFile)
            console.log("this.sonFileList", this.sonFileList)
            this.$emit("sendFiles", this.sonFileList)
          } else {
            this.$message.error("上传图片失败！")
          }
        })
        .catch((error) => {
          this.$message.error("系统错误！")
        })
    },
    //移除文件
    deleteFile(index) {
      console.log(index)
      this.sonFileList.splice(index, 1)
      this.$emit("sendFiles", this.sonFileList)
    },
  },
}
</script>

2、文件组件的使用MultipleFileUploadDown

<template>
  <div class="test">
    <el-form-item label="工作文件" :label-width="formLabelWidth">
      <MultipleFileUploadDown :fileList="fileList" @sendFiles="fileList">
      </MultipleFileUploadDown>
    </el-form-item>
  </div>
</template>

<script>
import MultipleFileUploadDown from "@/components/MultipleFileUploadDown"; //文件组件
export default {
  name: "",
  data() {
    return {
      fileList: [] //文件列表
    };
  },
  components: {
    MultipleImgUpload
  },
  methods: {
    //接收文件
    receiveFiles(files) {
      this.fileList = files;
    }
  }
};
</script>