element ui 二次封装上传附件的组件

因为element ui 上传组件的代码很长，在项目中关于上传的代码过于冗余，因此我二次封装了一个上传附件的组件：

项目中使用：

      <!-- 附件 -->
      <el-form-item label="附件信息" prop="accessory" style="position: relative" class="ml30">
        <e-upload
          v-model="accessory"
          :limit="3"
          :acceptData="{ maxsize: 50 * 1024 * 1024 }"
          accept=".doc,.docx,.xls,.xlsx,.pdf"
          @change="onFileChange"
        >
        </e-upload>
        <span class="tip">（注：支持word、pdf、excel，单个文件大小不超过50M，最多上传3个文件）</span>
      </el-form-item>

  onFileChange(fileList) { // 该方法就可以拿到当前组件上传的文件数据
      this.model.accessory = JSON.stringify(fileList)
   }

 

注册组件 src/components/index.js：

 import EUpload from './EUpload'
 export default {
   install(Vue) {
     Vue.component('EUpload', EUpload)
   }
 }

 

main.js引入自定义组件：

 import Components from '@/components/index'
 Vue.use(Components)

 

 

组件 EUpload.vue 全部代码：

<template>
  <!-- 上传附件组件，上传完后支持点击下载 -->
  <div>
    <el-upload
      :action="uploadApi()"
      :data="acceptData"
      :limit="limit"
      multiple
      :accept="accept"
      :file-list="fileList"
      :on-exceed="handleExceed"
      :on-success="(response, file, fileList) => handleSuccess(response, file, fileList)"
      :before-upload="file => beforeUpload(file)"
    >
      <el-button size="small" type="primary">点击上传</el-button>
      <!-- 通过插槽定义方法 -->
      <div slot="file" slot-scope="{ file }">
        <a class="el-upload-list__item-name"  @click="handleDownLoad(file)"> <i class="el-icon-document"></i>{{ file.name }} </a>
        <i class="el-icon-close" @click.stop="handleRemove(file)"></i>
        <i class="el-icon-close-tip">按 delete 键可删除</i>
      </div>
    </el-upload>
  </div>
</template>

<script>
const uidGenerator = () => {
  return '-' + parseInt(Math.random() * 10000 + 1, 10)
}

export default {
  name: 'EUpload',
  props: {
    value: {
      type: [String, Array],
      required: false
    },
    // 文件类型
    accept: {
      type: String,
      default: '.doc,.docx,.xls,.xlsx,.pdf'
    },
    // 上传时附带的额外参数
    acceptData: {
      type: Object,
      default: () => {
        return {
          maxsize: 1024 * 1024 * 20, // 限制文件大小
          maxsize_text: '20M', // 上传文件超过大小时的提示语
          disabledDownload: false,
          disabledRemove: false
        }
      }
    },
    // 提示
    tip: {
      type: String,
      default: ''
    },
    // 最大数量
    limit: {
      type: Number,
      default: 10
    } 67   },
  watch: {
    value: { // 编辑/详情时，回显触发，生成业务可以下载的 url
      handler(val, oldValue) {
        this.initFileList(val)
      },
      // 立刻执行handler
      immediate: true
    }
  },
  data() {
    return {
      fileList: []
    }
  },
methods: {
    // 将业务数据回显给组件
    initFileList(array) {
      if (!array || array.length == 0) {
        this.fileList = []
        return
      }
      let fileList = []
      let arr = array
      for (let a = 0; a < arr.length; a++) {
        let url = this.getFileAccessHttpUrl(arr[a].filePath) // 生成业务中支持下载的文件路径，该方法可根据项目不同进行修改
        fileList.push({
          uid: uidGenerator(),
          name: arr[a].fileName,
          status: 'done',
          url: url,
          response: {
            status: 'history',
            message: url
          }
        })
      }
      this.fileList = fileList
    },
    // 添加前缀, /dispatch 是项目中支持点击下载的文件前缀，需要加上
    getFileAccessHttpUrl(url) {
      if (url.indexOf('/dispatch') > -1) {
        return url
      } else {
        return '/dispatch' + url
      }
    },
    // 上传文件地址
    uploadApi() {
      return '/dispatch/upload'
    },
    // 文件大小限制
    beforeUpload(file) {
      const isLessThanMaxSize = file.size < this.acceptData.maxsize
      if (!isLessThanMaxSize) {
        this.$toast(`上传文件大小不能超过${this.acceptData.maxsize_text}!`)
      }
      return isLessThanMaxSize
    },
    // 文件个数限制
    handleExceed() {
      this.$toast(`当前限制最多上传 ${this.limit} 个文件!`)
    },
    // 上传成功
    handleSuccess(response, file, fileList) {
      if (response.code == 200) {
        this.$toast('上传成功')
        let attachment = fileList.map(item => {
          let url = ''
          if (item.status === 'success' && item.response) {
            url = item.response.data || ''
          } else {
            if (item.url) {
              url = item.url || ''
            }
          }
          return { name: item.name, url: url, uid: item.uid }
        })
        this.fileList = JSON.parse(JSON.stringify(attachment))
        attachment = attachment.map(item => {
          return {
            fileName: item.name,
            filePath: item.url,
            uid: item.uid
          }
        })
        // 回显给业务
        this.$emit('change', attachment)
      }
    },
    // 删除
    handleRemove(file) {
      let index
      this.fileList.find((item, idx) => {
        if (item.uid === file.uid) {
          index = idx
          return
        }
      })
      if (typeof index !== 'undefined') {
        this.fileList.splice(index, 1)
      }
      // 回显给业务
      this.$emit('change', this.fileList)
    },

    // 点击下载文件
    handleDownLoad(item) {
      const uploadUrl = process.env.VUE_APP_DOWNLOAD_URL + this.getFileAccessHttpUrl(item.url)
      if (this.isAndroid() && window.android) { // 移动端下载方法
        window.android.updateFile(uploadUrl, item.name)
      } else {
        window.location.href = uploadUrl
      }
    },
    // 判断机型是android
    isAndroid() {
      const u = navigator.userAgent
      const isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1 // 判断android
      return isAndroid
    }
  }
}
</script>