element-ui官网中有文件上传

        首先先展示一下我页面的实现效果，如下图所示：

         从图中可以看出，我这边实现的是一个可显示进度条的文件上传操作，而且如果上传的文件很大等，还可以中断文件上传。

        值得注意的是，如果有添加进度条，那就会存在一个bug,在文件没上传完时在点击重新上传文件进度条及百分比就会不停闪，原因是上个上传请求在同时进行。

        当然这些代码也会在接下来的讲解中进行解决

        【解决方法】只需要在下图位置操作时中断请求即可

        1.在弹框点击取消和右上角X的时候中断文件上传请求

        2.页面上添加取消上传按钮，文件选择按钮点击后，文件选择按钮置灰，直到文件上传成功后才启用。或者用户可以点击取消上传，此时中断当前上传请求，文件上传按钮启用，用户可以点击按钮继续上传文件

        接下来看看代码的大致结构：

        1.页面标签和变量声明

选取文件

progress: false, // 进度条是的显示
progressPercent: 0, // 进度条百分比
source: null, // 中断文件上传请求用
fileBtnDisabled: false, // 文件上传按钮是否禁用

         2.页面方法实现

/*** 文件上传* beforeupload阻止组件自动上传，自己调上传接口* @param file* @returns {boolean}*/beforeUpload(file) {// console.log('file', file)// 验证if (file.size === 0) {this.$notify({title: '失败',message: '不存在上传文件',type: 'error',duration: 2000})return false}this.loading = trueconst from = new FormData();from.append('file', file);from.append('type', 1);this.progress = true // 显示进度条this.temp.fileName = '' // 文件名称置空this.progressPercent = 0 // 进度条百分比const uploadEvent = (progressEvent) => { // 进度条百分比this.progressPercent = Number(((progressEvent.loaded / progressEvent.total) * 100).toFixed(2));};this.source = this.connectionSource() // 中断请求时用const cacheToken = this.source.token  // 这个是上传会话token，取消上传操作需要的参数this.fileBtnDisabled = true // 禁用上传按钮/*** 上传文件接口*/fileUploading(from, uploadEvent, cacheToken).then(res => {// 请求成功后，将文件名称，路径，大小复制到temp对应字段中，新增修改要用this.temp = Object.assign({}, this.temp, {fileName: res.data.fileName,url: res.data.url,size: res.data.size})this.$notify({title: '成功',message: '请求成功',type: 'success',duration: 2000})this.progress = false // 隐藏进度条this.loading = falsethis.fileBtnDisabled = false // 启用上传按钮}).catch(() => {this.progress = false // 隐藏进度条this.loading = falsethis.fileBtnDisabled = false // 启用上传按钮})return false},/*** 得到取消操作需要的连接* */connectionSource() {return axios.CancelToken.source()},/*** 弹框取消按钮或右上方X点击关闭弹框时，取消上传* 写两个取消上传的原因是，如果取消上传按钮直接调这个方法，dialog弹框会关闭* */cancel() {  // 取消上传this.dialogVisible = falseif (this.source) {this.source.cancel()this.fileBtnDisabled = false}},/*** 取消上传按钮* */cancel1() {  // 取消上传if (this.source) {this.source.cancel()this.fileBtnDisabled = false}},

        3.dialog弹框关闭时，中断文件上传

取消

        4.中断请求还需要用到axios

import axios from 'axios' // 中断文件上传请求时使用

        5.接口修改

/*** 文件上传* （添加文件上传进度条和中断请求，对接口进行修改）* @returns {AxiosPromise}* type: 类型*/
export function fileUploading(data, onUploadProgress, token) {return request.post('/file/upload', data, { 'Content-Type': 'multipart/form-data', timeout: 0, onUploadProgress, cancelToken: token })// return request({//   url: '/file/upload',//   method: 'post',//   data// })
}

 经过上面一系列操作后，文件上传的功能就实现了，如果还有不清楚的话，我把edit.vue的代码全部附上，但是真正文件上传能用到的部分只有我上面代码抠出来的部分。附上全部代码只是为了方便大家查看具体一点的代码结构而已。

edit.vue完整代码：

好了，到此就结束了，希望这篇文章能帮助到大家