vue element 手动上传文件

<el-dialog :visible.sync="visible" :title="titles" :close-on-click-modal="false" :close-on-press-escape="false"
    class="videoDialog" width="35%">
    <el-form ref="dataForm" label-width="150px" class="mt15">
<el-upload class="upload-demo" name="file" :http-request="httpRequest" :on-preview="handlePreview"
          :on-remove="handleRemove" :before-remove="beforeRemove" action="1" :file-list="fileList"
          :on-change="handleChange" :auto-upload="false" ref="upload">
          <!-- :before-upload="beforeAvatarUpload" -->
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传doc/docx文件</div>
        </el-upload>
        <div v-if="progressSeen">
          <el-progress :stroke-width="15" :percentage="progress"></el-progress>
        </div>
  </el-form>
    <template slot="footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确认</el-button>
    </template>
  </el-dialog>

export default {
	data(){
		return{
			 progress: 0,
        progressSeen: false,
		}
	},
	methods: {
	//删除
		handleRemove(file, fileList) {
		//接口调用  removeFile(this.dataForm.id).then(response => {})
        removeFile(this.dataForm.id).then(response => {
          if (response.code == 200) {
            this.fileList = fileList
          } else {
            this.$message({
              message: '删除失败！',
              type: 'error'
            });
          }
        })
      },
      //下载
      handlePreview(file) {
        let url=file.url
        //因为文件在本地
        window.open(url)
      },
      //删除之前的询问
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${ file.name }？`);
      },
      //文件变化时调用
      handleChange(file, fileList) {
        const extension2 = file.name.split(".")[1] === "docx";
        const extension3 = file.name.split(".")[1] === "doc";
        if (!extension2 && !extension3) {
          this.$message({
            message: '上传文件只能是 .docx、.doc 格式!',
            type: 'error'
          });
          this.fileList =[]
          return false
        }else{
          if (fileList.length > 0 & this.fileList.length > 0) {
            this.$confirm('此操作将覆盖当前文件, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              this.fileList = [fileList[fileList.length - 1]] // 这一步，是 展示最后一次选择的csv文件
            }).catch(() => {
              this.fileList = [fileList[0]]
            });
          } else {
            this.fileList = [fileList[0]]
          }
        }
      },
      httpRequest(param) {
        let that = this
        let fileObj = param.file // 相当于input里取得的files
        let fd = new FormData() // FormData 对象
        fd.append('file', fileObj) // 文件对象
        fd.append('id', this.dataForm.id)
        that.submitEdtor(fd)
      },
      submitEdtor(fd) {
        let that = this
        //显示进度
        that.progressSeen = true;
        that.progress = 0
        this.$refs["dataForm"].validate(valid => {
          if (valid) {
          //进度条
            const interval = setInterval(() => {
              if (that.progress >= 99) {
                clearInterval(interval)
                return
              }
              that.progress += 1
            }, 20)
          //接口调用  uploadFile(fd).then(response => {})
              uploadFile(fd).then(response => {
                if (response.code === 200) {
                  this.process = 100
                  this.progressSeen = false
                  this.$message({
                    message: '上传成功',
                    type: 'success',
                    duration: 500,
                    onClose: () => {
                    }
                  })
                }
              });
          }
        });
      },
      /** 提交按钮 */
      dataFormSubmit: debounce(function() {
        if (this.fileList.length > 0) {
        //手动上传文件
          this.$refs.upload.submit()
        } else {
          this.$message({
            message: '请选择上传的设备模板',
            type: 'error',
            duration: 500,
            onClose: () => {
            }
          })
        }
      })
	}
}