element-ui 文件上传多个

 

 

<template>
  <div>
    <el-upload
      ref="upload"
      :action="action"
      :limit="5"
      :file-list="fileList"
      :on-exceed="handleExceed"
      :on-remove="handleRemove"
      :on-success="handleSuccess"
      :before-upload="beforeUpload"
      :disabled="disabled"
      :on-preview="hanleOnpreview"
    >
      <el-button size="small" type="primary">点击上传</el-button>
      <div slot="tip" class="el-upload__tip">
        可以上传jpg/png/Jpeg/word/pdf/excel等格式文件，单个文件不可超过5M，附件不可超过5个
      </div>
    </el-upload>
  </div>
</template>

<script>
// /file/download
// 下载

import { fileDownload } from "@/api/announcement-manage";
export default {
  props: {
    file: {
      type: Array,
      default: () => {
        return [];
      },
    },
    uploadType: {
      type: String,
      default: () => {
        return "";
      },
    },
    disabled: {
      type: Boolean,
      default: () => {
        return false;
      },
    },
  },
  data() {
    return {
      // action: "https://www.xwqyy.com/filemanage/file/upload?project=customer",
      action: this.$util.baseUrl + "/sdfs/file/uploadFile", // 上传图片的url
      fileList: [],
    };
  },
  mounted() {
    this.fileList = this.file.length > 0 ? this.file : [];
  },
  watch: {
    file: {
      handler(newData, oldData) {
        this.fileList = newData.length > 0 ? newData : [];
      },
      deep: true,
    },
  },
  methods: {
    handleRemove(file, fileList) {
      console.log("file111", fileList);
      for (let item of fileList) {
        item.fileName = item.name;
        item.filePath = item.url;
      }
      if (this.uploadType == "fileList") {
        console.log("file222", fileList);
        this.$emit("getFileList", fileList);
      }
    },
    handleSuccess(res, file, fileList) {
      // res.data.name = res.data.fileName;
      // res.data.url = res.data.filePath;
      // this.fileList.push(res.data);
      let imgarr = [];
      for (let item of fileList) {
        item.fileName = res.data.fileName;
        item.filePath = res.data.filePath;
        imgarr = fileList;
      }
      if (this.uploadType == "fileList") {
        this.$emit("getFileList", imgarr);
      }
    },
    beforeUpload(file) {
      const isLt5M = file.size / 1024 / 1024 < 5;
      if (!isLt5M) {
        this.$message.error("上传图片大小不能超过5MB!");
      }
      return isLt5M;
    },
    handleExceed(files, fileList) {
      this.$message.warning("附件不能超过5个");
    },
    //点击下载
    hanleOnpreview(file) {
      fileDownload({
        filePath: file.url,
      }).then((res) => {
        this.downFile(res.data, file.name);
      });
    },
    //下载乱码转换
    downFile(content, fileName) {
      const dom = document.createElement("a"); // 隐藏的a标签，href为输出流
      const blob = new Blob([content], {
        type: "application/vnd.ms-excel", // 创建一个类文件对象：Blob对象表示一个不可变的、原始数据的类文件对象
      });
      const url = window.URL.createObjectURL(blob); // 生成一个Blob对象
      dom.style.display = "none";
      dom.href = url;
      document.body.appendChild(dom);
      dom.setAttribute("download", fileName);
      dom.click();
      document.body.removeChild(dom);
      URL.revokeObjectURL(url);
    },
  },
};
</script>

<style lang="less">
.disabled .el-upload--picture-card {
  display: none;
}
</style>