vue element Upload http-request 自定义文件上传，并执行上传成功与失败钩子

需求

在vue项目中使用element-UI的文件上传，但是普通的上传不满足项目需求，需要自定义文件上传，虽然有对应的钩子，但是具体的操作缺没有。

解决

自定义文件上传使用http-request钩子，http-request钩子中使用Promise可以触发el-upload的成功与失败钩子

html部分

<el-upload class="upload-demo" 
	:limit="1" 
	drag 
	action="#" 
	accept=".xls,.xlsx" 
	:file-list="fileList" 
	:http-request="uploadFile" 
	:on-exceed="handleExceed" 
	:on-remove="handleRemove" 
	:before-upload="beforeUpload" 
	:on-success="handleSuccess" 
	:on-error="handleError"
	>
    <i class="el-icon-upload"></i>
    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
</el-upload>
<el-button type="primary" @click="onNextStep">下一步</el-button>

js部分

import API from './api'
export default {
	data() {
    	return {
    		fileList: [],
    	}
	},
	methods: {
		// 点击下一步
		onNextStep() {
			// 这里更近需求修改
		},
		// 自定义文件上传
	    uploadFile(params) {
	      // 文件上传成功会走成功的钩子，失败走失败的钩子
	      return new Promise((resolve, reject) => {
	        // 通过 FormData 对象上传文件
	        var formData = new FormData()
	        formData.append('excel', params.file)
	        API.Upload(formData).then((res) => {
	          if (res.code === 200) {
	            resolve(res)
	          } else {
	            reject(res)
	          }
	        }).catch((res) => {
	          reject(res)
	        })
	      })
	    },
		// 超出文件个数的回调
	    handleExceed() {
	      this.$message({
	        type: 'warning',
	        message: '超出最大上传文件数量的限制！'
	      })
	      return false
	    },
	    // 删除上传的文件
	    handleRemove(file, fileList) {
	      this.fileList = fileList
	    },
	    // 限制文件
	    beforeUpload(file) {
	      const suffix = file.name.split('.').pop()
	      const list = ['xls', 'xlsx', 'XLS', 'XLSX']
	      if (list.indexOf(suffix) < 0) {
	        this.$message.error('上传的文件只能是 XLS/XLSX 格式!')
	        return false
	      }
	      const isLt2M = file.size / 1024 / 1024 < 2
	      if (!isLt2M) {
	        this.$message.error('上传文件大小不能超过 2MB!')
	        return false
	      }
	    },
	    // 上传成功
	    handleSuccess(res, file, fileList) {
	      if (res.code === 200) {
	      	// 	这一步文件上传成功，可以根据需求加以修改
	        this.fileList = fileList
	        this.$message({
	          type: 'success',
	          message: res.msg
	        })
	      }
	    },
	    // 上传失败
	    handleError(res, file, fileList) {
	      this.$message.error(res.msg)
	    },
	}
}