FileUpload组件支持多文件上传

RuoYi

2021-07-08 e447fb806b66adb1150773582ca7c54dd9d09c4f

FileUpload组件支持多文件上传

 ruoyi-ui/src/components/FileUpload/index.vue

@@ -4,9 +4,7 @@
      :action="uploadFileUrl"

      :before-upload="handleBeforeUpload"

      :file-list="fileList"

      :limit="1"

      :on-error="handleUploadError"

      :on-exceed="handleExceed"

      :on-success="handleUploadSuccess"

      :show-file-list="false"

      :headers="headers"

@@ -26,8 +24,8 @@


    <!-- 文件列表 -->

    <transition-group class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul">

      <li :key="file.uid" class="el-upload-list__item ele-upload-list__item-content" v-for="(file, index) in list">

        <el-link :href="file.url" :underline="false" target="_blank">

      <li :key="file.uid" class="el-upload-list__item ele-upload-list__item-content" v-for="(file, index) in fileList">

        <el-link :href="`${baseUrl}${file.url}`" :underline="false" target="_blank">

          <span class="el-icon-document"> {{ getFileName(file.name) }} </span>

        </el-link>

        <div class="ele-upload-list__item-content-action">

@@ -42,6 +40,7 @@
import { getToken } from "@/utils/auth";



export default {

  name: "FileUpload",

  props: {

    // 值

    value: [String, Object, Array],

@@ -63,6 +62,7 @@
  },

  data() {

    return {

      baseUrl: process.env.VUE_APP_BASE_API,

      uploadFileUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址

      headers: {

        Authorization: "Bearer " + getToken(),

@@ -70,29 +70,34 @@
      fileList: [],

    };

  },

  watch: {

    value: {

      handler(val) {

        if (val) {

          let temp = 1;

          // 首先将值转为数组

          const list = Array.isArray(val) ? val : this.value.split(',');

          // 然后将数组转为对象数组

          this.fileList = list.map(item => {

            if (typeof item === "string") {

              item = { name: item, url: item };

            }

            item.uid = item.uid || new Date().getTime() + temp++;

            return item;

          });

        } else {

          this.fileList = [];

          return [];

        }

      },

      deep: true,

      immediate: true

    }

  },

  computed: {

    // 是否显示提示

    showTip() {

      return this.isShowTip && (this.fileType || this.fileSize);

    },

    // 列表

    list() {

      let temp = 1;

      if (this.value) {

        // 首先将值转为数组

        const list = Array.isArray(this.value) ? this.value : [this.value];

        // 然后将数组转为对象数组

        return list.map((item) => {

          if (typeof item === "string") {

            item = { name: item, url: item };

          }

          item.uid = item.uid || new Date().getTime() + temp++;

          return item;

        });

      } else {

        this.fileList = [];

        return [];

      }

    },

  },

  methods: {

@@ -124,10 +129,6 @@
      }

      return true;

    },

    // 文件个数超出

    handleExceed() {

      this.$message.error(`只允许上传单个文件`);

    },

    // 上传失败

    handleUploadError(err) {

      this.$message.error("上传失败, 请重试");

@@ -135,12 +136,13 @@
    // 上传成功回调

    handleUploadSuccess(res, file) {

      this.$message.success("上传成功");

      this.$emit("input", res.url);

      this.fileList.push({ name: res.fileName, url: res.fileName });

      this.$emit("input", this.listToString(this.fileList));

    },

    // 删除文件

    handleDelete(index) {

      this.fileList.splice(index, 1);

      this.$emit("input", '');

      this.$emit("input", this.listToString(this.fileList));

    },

    // 获取文件名称

    getFileName(name) {

@@ -149,11 +151,16 @@
      } else {

        return "";

      }

    },

    // 对象转成分隔字符串

    listToString(list) {

      let files = "";

      for (let key in list) {

        files += list[key].url + ",";

      }

      return files.substr(0, files.length - 1);

    }

  },

  created() {

    this.fileList = this.list;

  },

  }

};

</script>