附件上传 Vue+Element-ui

附件上传 Vue+Element-ui

代码如下（示例）：

 <el-upload :accept="accept"
            :action="uploadApi"
            :file-list="fileList"
            :headers="headers"
            :on-exceed="handleExceed"
            :on-remove="announceRemove"
            :on-change="readExcel"
            :on-success="fillUploadSuccess"
             class="upload-demo"
            :limit="1"
             name="file">
       <i class="iconclass shangchuan"></i>
  </el-upload>
 data(){
   return{
      accept: '.jpg,.jpeg,.zip,.rar,.pdf,.doc,.docx,.xls,.xlsx',
      uploadApi: `接口路径`,
      fileList: [],//上传文件的集合
      headers: header,//设置上传的请求头部
      fileNums: 0,
      // 服务器返回数据集合
      uploadList: {},
   }
 },
 methods:{
 	   // 文件限制提示  文件超出个数限制时的钩子
    handleExceed(files, fileList) { 
      this.$message.warning(`当前限制选择 3 个文件，本次选择了${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
    },
       // 移除附件 删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止删除。
    announceRemove(file, fileList) {
      // 公示文件删除
      let id = ''
      if (file.id) {
        id = file.id
      } else {
        id = file.response.data.data
      }
      this.myForm.fileList.forEach(item => {
        if (item === id) {
          this.myForm.fileList.splice(0, 1)
        }
      })
    },
    //文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
    readExcel(files, fileList) {
      this.fileNums = fileList.length
    },
       // 文件上传成功列表 文件上传成功时的钩子
    fillUploadSuccess(resData, file, fileList) {
      if (resData.code === responseCode.success) {
        this.$set(this.uploadList, file.url, resData.data)
        this.myForm.uploadVo = fileList[0].response.data
      } else {
        this.$message({
          type: 'error',
          showClose: true,
          message: resData.msg
        })
        this.$delete(this.uploadList, file.url)
      }
    },
 }