vue后台管理系统---上传附件

前言

最近遇到一个项目，使用vue开发后台管理系统，其中有一个需求是需要上传附件(Word、PPT、excel、图片格式、PDF、压缩包)
如图：

开发

接口

// 上传接口
  uploadFile: (params, onUploadProgress) => upload('/sync_api/api/v1/upload/uploadFile', params, onUploadProgress),

页面

html

		<!-- 上传附件 -->
        <div v-loading="fileUploading">
          <div class="title-box">
            <h3 style="width: 120px">
              <span class="required">*</span>
              上传附件
            </h3>
            <p>可上传Word、PPT、excel、图片格式、PDF、压缩包；总内容不超过500MB</p>

			<!-- input上传 -->
            <input
              ref="fileUpload"
              class="upload-input"
              type="file"
              title=""
              multiple="multiple"
              @change="fileChange($event, 0, 500, 0, ['word', 'ppt', 'excel', 'image', 'pdf', 'zip'], fileSuc)"
            />
            <el-button class="add-btn" @click="add('fileUpload')">
              <img alt="" class="imgIcon" src="@/assets/image/icon/addIcon1.png" />
              新增
            </el-button>
          </div>
          <div class="file-list" style="padding-left: 120px">
            <div v-for="(item, index) in fileList" :key="index" class="file-box">
              <div class="file-icon">
              	<!-- 删除icon图片 --> 
                <img
                  class="file-del"
                  src="@/assets/image/icon/icon-file-del.png"
                  alt=""
                  @click="fileList.splice(index, 1)"
                />
                
                <img
                  v-if="typeList.image.includes(getSuffix(item.originalFileName))"
                  class="file-img"
                  src="@/assets/image/icon/icon-image.png"
                  alt=""
                  @click="download(item)"
                />
                <img
                  v-else-if="typeList.word.includes(getSuffix(item.originalFileName))"
                  class="file-img"
                  src="@/assets/image/icon/icon-word.png"
                  alt=""
                  @click="download(item)"
                />
                <img
                  v-else-if="typeList.ppt.includes(getSuffix(item.originalFileName))"
                  class="file-img"
                  src="@/assets/image/icon/icon-ppt.png"
                  alt=""
                  @click="download(item)"
                />
                <img
                  v-else-if="typeList.excel.includes(getSuffix(item.originalFileName))"
                  class="file-img"
                  src="@/assets/image/icon/icon-excel.png"
                  alt=""
                  @click="download(item)"
                />
                <img
                  v-else-if="typeList.pdf.includes(getSuffix(item.originalFileName))"
                  class="file-img"
                  src="@/assets/image/icon/icon-pdf.png"
                  alt=""
                  @click="download(item)"
                />
                <img
                  v-else-if="typeList.zip.includes(getSuffix(item.originalFileName))"
                  class="file-img"
                  src="@/assets/image/icon/icon-zip.png"
                  alt=""
                  @click="download(item)"
                />
              </div>
              //文件名称
              <p class="file-name">{{ item.originalFileName }}</p>
              
              <el-button class="file-btn" @click="add('fileUpload', index)">
                <img src="@/assets/image/icon/changeIcon.png" alt="" />
                修改
              </el-button>
            </div>
          </div>
        </div>
        
<style>
	.upload-input {
	    height: 0;
	    width: 0;
	    opacity: 0;
	  }
</style>

js

<script>
import { Message } from 'element-ui'
export default {
  components: {},
  data: () => ({
    // 对应类型的名称(上传提示时需要)
    typeName: {
      image: '图片',
      word: 'Word',
      ppt: 'PPT',
      excel: 'Excel',
      zip: '压缩包',
      pdf: 'PDF',
      video: '视频'
    },
    typeList: {
      // 支持上传的后缀名
      image: ['png', 'jpg', 'jpeg', 'gif', 'bmp'], // 图片
      word: ['doc', 'docx'], // Word
      ppt: ['ppt', 'pptx'], // PPT
      excel: ['xls', 'xlsx'], // Excel
      zip: ['zip', 'rar', '7z'], // 压缩包
      pdf: ['pdf'], // PDF
      video: ['mp4', 'mov']
    },
    fileList: [], // 附件列表
    fileUploading: false, // 上传附件Loading
    editIndex: null, // 编辑中的Index
  }),
  watch: { },
  created() {  },
  mounted() {},
  methods: {
    /**
     * 下载
     * @param file 下载的文件
     */
    download(file) {
      this.$download(file.filePath, file.originalFileName)
    },
    /**
     * 上传点击事件
     * @param ref
     * @param editIndex
     */
    add(ref, editIndex) {
      this.editIndex = editIndex
      this.$refs[ref].value = ''
      this.$refs[ref].dispatchEvent(new MouseEvent('click'))
    },
    /**
     * 上传附件文件回调
     * @param fileArr
     * @returns {Promise<void>}
     */
    async fileSuc(fileArr) {
      this.fileUploading = true
      const data = await this.uploadFile(fileArr, 'system').catch(() => {
        this.fileUploading = false
      })
      this.fileUploading = false
      if (this.editIndex != null) {
        this.fileList.splice(this.editIndex, 1, ...data)
      } else {
        this.fileList.push(...data)
      }
    },
    /**
     * input获取文件事件
     * @param e event
     * @param fileSize 限制大小，单位MB
     * @param totalSize 限制总大小，单位MB
     * @param limit 限制数量
     * @param typeList 支持的格式列表
     * @param sucFun 成功回调
     */
    fileChange(e, fileSize, totalSize, limit, typeList, sucFun) {
      const files = e.target.files
      const fileArr = []
      let hasFile = false // 是否有可上传的文件
      const msgList = [] // 消息队列
      let total = 0
      for (const file of files) {
        if (fileArr.length >= limit && limit !== 0) {
          msgList.push(`超过${limit}个文件，剩余文件跳过上传`)
          break
        }
        if (file.size / 1024 / 1024 > fileSize && fileSize !== 0) {
          if (fileSize > 1024) {
            msgList.push(`${file.name}大于${fileSize / 1024}GB，跳过上传`)
          } else {
            msgList.push(`${file.name}大于${fileSize}MB，跳过上传`)
          }
          continue
        }
        total += file.size / 1024 / 1024
        if (total > totalSize && totalSize !== 0) {
          msgList.push(`超过${totalSize}MB，剩余文件跳过上传`)
          break
        }
        let has = false
        // 循环遍历支持下载后缀，不支持的文件则跳过
        for (const k of typeList) {
          const list = this.typeList[k]
          if (list.includes(this.getSuffix(file.name))) {
            has = true
            break
          }
        }
        if (!has) {
          const msgTypeList = []
          for (const k of typeList) {
            msgTypeList.push(this.typeName[k])
          }
          msgList.push(`${file.name}不是${msgTypeList.join('、')}，跳过上传`)
          continue
        }
        fileArr.push(file)
        hasFile = true
      }
      // 文件都被跳过，取消上传
      if (!hasFile) {
        msgList.push('没有可上传的文件')
        this.msgTick(msgList)
        return
      }
      this.msgTick(msgList) // 处理消息队列
      sucFun(fileArr)
    },
    /**
     * 多消息事件处理，避免同时弹出覆盖显示
     * @param list 消息列表
     * @param index 当前进行显示的下标
     */
    msgTick(list, index = 0) {
      if (!list[index]) {
        return
      }
      setTimeout(
        function() {
          Message.error(list[index])
          this.msgTick(list, index + 1)
        }.bind(this),
        300
      )
    },
    /**
     * 获取后缀名
     * @param name 文件名
     * @returns {string} 后缀名
     */
    getSuffix(name) {
      return name.substring(name.lastIndexOf('.') + 1).toLowerCase()
    },
    /**
     * 上传
     * @param fileList 文件列表
     * @param type 类型
     * @returns {Promise<*>}
     */
    async uploadFile(fileList, type = 'system') {
      const formData = new FormData()
      formData.append('type', type)
      fileList.forEach(item => formData.append('files', item))
      const { data } = await this.$http.uploadFile(formData)
      return data
    }
  }
}
</script>

至此，附件上传分享完毕