【sgUploadList】自定义组件：基于elementUI的el-upload封装的上传列表组件，适用于上传附件时

news2024/12/23 22:01:43

sgUploadList源码

<template>
  <div :class="$options.name">
    <ul class="files">
      <li v-for="(a, i) in files" :key="i">
        <sgFileLink :data="a" @remove="remove(a, i)" clearable />
      </li>
    </ul>

    <el-upload
      v-if="!disabled"
      ref="upload"
      :accept="accept"
      :action="'#'"
      :auto-upload="false"
      :disabled="disabled"
      :multiple="true"
      :on-change="change"
      :show-file-list="false"
    >
      <el-button slot="trigger" type="primary" icon="el-icon-upload2">上传文件</el-button>
      <el-alert
        v-if="alertMsg !== false"
        style="margin-top: 10px"
        :closable="true"
        :close-text="``"
        :description="``"
        :effect="'light'"
        :show-icon="true"
        :title="alertMsg || `最多可上传${limit}个附件,每个附件大小不超过${maxSize}M`"
        :type="'warning'"
      />
    </el-upload>

    <el-image ref="image" style="display: none" src="" :preview-src-list="[previewSrc]" />
  </div>
</template>
<script>
import sgFileLink from "@/vue/components/admin/sgFileLink";
export default {
  name: "sgUploadList",
  components: { sgFileLink },
  data() {
    return {
      suffixIconURLs: this.$global.resourceTypes.flatMap((v) => v.suffixIconURLs),
      accept: `*`,
      form: {}, //表单信息
      uploadBtn: null, //上传触发按钮
      disabled: false, //是否只读
      alertMsg: ``, //如果为false就隐藏提示内容
      limit: 10,
      maxSize: 100,
      files: [],
      previewSrc: null,
    };
  },
  props: ["data"],
  watch: {
    data: {
      handler(newValue, oldValue) {
        // console.log(`深度监听${this.$options.name}：`, newValue, oldValue);
        if (Object.keys(newValue || {}).length) {
          this.form = JSON.parse(JSON.stringify(newValue));
        } else {
          this.form = {};
        }
        this.form = JSON.parse(JSON.stringify(newValue));
        this.disabled = this.form.disabled;
        this.alertMsg = this.form.alertMsg;
        // 获取外部回显上传列表----------------------------------------
        let files =
          typeof this.form.files === `string`
            ? JSON.parse(this.form.files || "[]")
            : this.form.files || [];
        Array.isArray(files) || (files = [files]);
        this.files = files;
        // ----------------------------------------
        this.form.accept && (this.accept = this.form.accept);
        this.form.limit && (this.limit = this.form.limit);
        this.form.maxSize && (this.maxSize = this.form.maxSize);
        this.$nextTick(() => {
          this.uploadBtn = this.$refs.upload.$children[0].$refs.input;
          this.uploadBtn.webkitdirectory = this.form.webkitdirectory; //让el-upload支持上传文件夹
        });
      },
      deep: true, //深度监听
      immediate: true, //立即执行
    },
  },
  methods: {
    change(file) {
      if (this.files.length >= this.limit) {
        this.$message(`最多只能上传${this.limit}个文件`);
      } else {
        let fileSizeMB = file.size / 1024 / 1024; //转换文件大小（单位MB）
        if (this.maxSize && fileSizeMB > this.maxSize) {
          this.$message(
            `“${file.name}”文件大小超过${this.$g.getSize(this.maxSize * 1024 * 1024)}`
          );
        } else {
          this.files.push(file.raw);
          this.$emit(`change`, { files: this.files });
        }
      }
    },
    remove(d, i) {
      this.files.splice(i, 1);
      this.$emit(`change`, { files: this.files });
    },
    getSuffixByFileName(name) {
      return name.split(".").slice(-1)[0];
    },
    getFileTypeBySuffix(suffix) {
      return (this.$global.resourceTypes.find((v) => v.suffixs.includes(suffix)) || {})
        .type;
    },
    // 获取文件格式图片路径
    getFlieThumbSrc(d) {
      let rpnull = `~@/../static/img/fileType/other/rpnull.svg`;
      if (d) {
        typeof d === `string` && (d = JSON.parse(d));
        if (Object.keys(d || {}).length) {
          return this.suffixIconURLs.find((v) =>
            v.includes(`/${this.getSuffixByFileName(d.name)}.`)
          );
        } else return rpnull;
      } else return rpnull;
    },
    showImage(previewSrc) {
      this.previewSrc = previewSrc;
      this.$refs.image.showViewer = true; //显示大图
    },
    clickFile(d) {
      let isImage = false;
      if (d.fileURL) {
        isImage =
          this.getFileTypeBySuffix(this.getSuffixByFileName(d.name)) === `picture`;
        isImage ? this.showImage(d) : window.open(`${d.fileURL}`, "_blank");
      } else {
        isImage = d.type.includes(`image`);
        isImage
          ? this.$g.file2Base64Image(d, (d) => this.showImage(d))
          : this.$g.downloadByFileObject(d);
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.sgUploadList {
  .files {
    li {
      margin-bottom: 10px;
      line-height: normal;
      width: max-content;
      max-width: 100%;
    }
  }
  .el-alert {
    line-height: normal;
  }
}
</style>

应用

<sgUploadList
  :data="{
    files: convertBackendFiles(form.FILE_INFO_LIST || []),
    disabled: disabled_,
    limit: 10,
  }"
  @change="getUploadFiles"
/>


...


getUploadFiles({ files }) {
    console.log(`获取上传文件：`, files);
},