X-web/src/views/modules/common/upload-component.vue

<template>
  <section>
    <el-col :span="24">
      <div v-show="displayTitle" class="title">
        <span v-show="displayStar" style="color: red">*</span> {{ title }}
      </div>
      <el-upload
        :disabled="display"
        class="upload-demo"
        ref="upload"
        :multiple="multiple"
        action="#"
        :accept="accept"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :on-change="handleChange"
        :file-list="fileList"
        :limit="limit"
        :on-exceed="handleExceed"
        :http-request="handleUpload"
        :auto-upload="false"
        style="margin-top: 10px; margin-left: 10px"
      >
        <el-button v-show="!display" slot="trigger" size="small" type="primary"
          >选取文件</el-button
        >
        <el-button
          v-show="!display"
          style="margin-left: 10px"
          size="small"
          type="success"
          @click="submitUpload"
          >开始上传</el-button
        >
         <el-button v-if="templateCode !== ''" size="small" @click="downloadTemplate">下载模板</el-button>
      </el-upload>
    </el-col>
    <!-- 图片预览 -->
    <el-dialog
      title="图片预览"
      :append-to-body="true"
      :visible.sync="previewVisible"
      width="50%"
    >
      <img
        :src="previewPath"
        :alt="previewName"
        style="width: 100%; height: 100%"
      />
    </el-dialog>
  </section>
</template>

<script>
import { uploadUrl, downloadUrl, uploadFiles } from '@/api/file'
import { getFileExt } from '@/api/util'
export default {
  name: 'upload-component',
  props: {
    title: {
      type: String,
      default: '附件'
    },
    accept: {
      type: String,
      default: ''
    },
    multiple: {
      type: Boolean,
      default: false
    },
    limit: {
      type: Number,
      default: 5
    },
    display: {
      type: Boolean,
      default: false
    },
    fileObjList: {
      type: Array,
      default: () => []
    },
    displayTitle: {
      type: Boolean,
      default: true
    },
    displayStar: {
      type: Boolean,
      default: true
    },
    templateCode: {
      type: String,
      default: ''
    }
  },
  watch: {
    fileList (newVal) {
      this.$emit('uploadSuccess', newVal)
    },
    fileObjList (newVal) {
      this.fileList = newVal
    }
  },
  data () {
    return {
      fileList: [],
      uploadUrl: uploadUrl,
      previewPath: '',
      previewName: '',
      previewVisible: false
    }
  },
  methods: {
    handleUpload (file) {
      console.log(file)
      function getBase64 (file) {
        return new Promise((resolve, reject) => {
          const reader = new FileReader()
          reader.readAsDataURL(file)
          reader.onload = () => resolve(reader.result)
          reader.onerror = (error) => reject(error)
        })
      }

      return getBase64(file.file).then((res) => {
        // 需要return才会显示上传成功状态，不加return不好使
        // 开始上传
        const formData = new FormData()
        formData.append('file', file.file)
        uploadFiles(formData).then(({ data }) => {
          if (data && data.code === '200') {
            data.data.forEach((item) => {
              let fileData = this.fileList.find(
                (file) => file.name === item.originFileName
              )
              fileData.url = item.fileUrl
            })
            this.$message.success('上传成功')
          } else {
            this.$message.error('上传失败')
          }
        })
      })
    },
    // 上传
    submitUpload () {
      this.$refs.upload.submit()
      // // 判断是否有文件
      // if (this.fileList.length === 0) {
      //   return this.$message.warning("请选取文件后再上传");
      // }
      // // 判断是否有重复文件
      // let arr1 = this.fileList.map((i) => i.name);
      // let arr2 = [...new Set(arr1)];
      // if (arr1.length !== arr2.length) {
      //   return this.$message.warning("请去掉重复文件后再上传");
      // }
      // // 开始上传
      // const formData = new FormData();
      // this.fileList.forEach((file) => {
      //   formData.append("file", file.raw);
      // });
      // uploadFiles(formData).then(({ data }) => {
      //   if (data && data.code === "200") {
      //     data.data.forEach((item) => {
      //       let fileData = this.fileList.find(
      //         (file) => file.name === item.originFileName
      //       );
      //       fileData.url = item.fileUrl;
      //     });
      //     this.$message.success("上传成功");
      //   } else {
      //     this.$message.error("上传失败");
      //   }
      // });
    },
    // 移除
    handleRemove (file, fileList) {
      this.fileList = fileList
    },
    // 预览
    handlePreview (file) {
      if (!file || !file.name || !file.url) {
        this.$message.error('没有可预览的文件！')
        return
      }
      let ext = getFileExt(file.name)
      if (ext === 'jpg' || ext === 'jpeg' || ext === 'png' || ext === 'gif') {
        this.previewPath = downloadUrl + file.url
        this.previewName = file.name
        this.previewVisible = true
      } else {
        // 弹出新页面显示下载文件
        window.open(downloadUrl + file.url, '_blank')
      }
    },
    // 改变上传内容
    handleChange (file, fileList) {
      this.fileList = fileList
    },
    // 超限
    handleExceed (files, fileList) {
      this.$message.warning(
        `当前限制选择 ${this.limit} 个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      )
    },
    // 下载模板
    downloadTemplate () {
      if (this.templateCode !== '') {
        location.href = this.$http.adornUrl(`/file-service/minio-file/systemTable/download/${this.templateCode}`)
      }
    }
  }
}
</script>

<style scoped></style>