xps-web-csat/src/components/FileUpload/multiUpload.vue

<template>
  <el-form :model="form">
    <el-upload
      action
      :file-list="nFileList"
      :limit="limit"
      :auto-upload="true"
      list-type="listType"
      :on-exceed="handleExceed"
      :before-upload="handleBeforeUpload"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove"
      :http-request="handleUploadFile"
    >
      <el-button size="small" type="primary">点击上传</el-button>
      <span class="upload-tip"> ( 文件大小不超过{{ maxSize }}Mb )</span>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible" :modal="false">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </el-form>
</template>
<script>
import { uploadFile } from '@/api/system/uploadApi'
export default {
  props: {
    value: {
      type: Array,
      default: () => []
    },
    limit: {
      type: Number,
      default: 0
    },
    maxSize: {
      type: Number,
      default: 0
    },
    listType: {
      type: String,
      default: 'picture'
    },
    dirId: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      dialogImageUrl: '',
      dialogVisible: false,
      oFileList: [],
      nFileList: [],
      limitNum: 1,
      form: {}
    }
  },
  watch: {
    value(val) {
      this.oFileList = val
      this.initFileList()
    },
    oFileList(val) {
      this.$emit('input', val)
    }
  },
  methods: {
    // 初始化列表
    initFileList() {
      this.nFileList = []
      this.oFileList.forEach((file) => {
        this.nFileList.push({ name: file.fileTitle, url: file.fileUrl, id: file.fileId })
      })
    },

    // 文件列表移除文件时的钩子
    handleRemove(file, fileList) {
      const fileId = file.id
      this.oFileList.forEach((file, index) => {
        if (file.opCode === 1 && fileId === file.fileId) {
          file.opCode = -1
        } else if (fileId === file.fileId) {
          this.oFileList.splice(index, 1)
        }
      })
    },

    // 上传文件之前的钩子
    handleBeforeUpload(file) {
      const size = file.size / 1024 / 1024 / 5
      if (size > 5) {
        this.$notify.warning({
          title: '警告',
          message: '图片大小必须小于5M'
        })
      }
    },
    // 文件超出个数限制时的钩子
    handleExceed(files, fileList) {
    },
    handleUploadFile({ file }) {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      const formData = new FormData()
      formData.append('file', file)
      formData.append('dirId', this.dirId)
      uploadFile(formData).then((resp) => {
        loading.close()
        const { code, data, msg } = resp
        if (code === 200) {
          const of = {}
          of.fileId = data.fileId
          of.fileTitle = data.fileTitle
          of.fileSize = data.fileSize
          of.fileUrl = data.fileUrl
          of.fileExt = data.fileExt
          this.oFileList.push(of)
          this.nFileList.push({ name: of.fileTitle, url: of.fileUrl, id: of.fileId })
        } else {
          this.$message.error(msg)
        }
      }).catch((error) => {
        loading.close()
        console.log(error)
      })
    },

    // 点击文件列表中已上传的文件时的钩子
    handlePictureCardPreview(file) {
      if (/\.(jpg|jpeg|png|GIF|JPG|PNG)$/.test(file.url)) {
        this.dialogImageUrl = file.url
        this.dialogVisible = true
        return
      }
      window.open(file.url)
    }
  }
}
</script>

<style lang="scss" scoped>
  .upload-tip {
    color: #fff;
    font-size: 10px;
  }
</style>