【vue 日志】关于文件上传的问题记录

序言

最近任务需要做一个手动上传文件的功能，刚好记录一下

一.需求

如下图，实现一个手动上传文件的功能

二.代码

1. 结构

<el-form-item label="文件上传：" prop="file">
  <el-upload
     class="upload-demo"
     action="https://www.baidu.com/"
     :multiple='false'
     :auto-upload="false"
     :on-change="handelOnChange"
     :file-list="fileList">
     <el-button size="small" type="primary">点击上传</el-button>
   </el-upload>
 </el-form-item>

action是自动上传的地址，这里不需要就随便写了一个
multipe 不需要上传多个，false
auto-upload 关闭自动上传 false
handelOnChange 该函数处理一下数据存储问题
fileList 文件数据存储变量

handelOnChange处理代码如下

handelOnChange(res,file) {
   if (res) {
      var reader = new FileReader();
      reader.readAsDataURL(res.raw);
      reader.onload = (e) => {
        this.audioUrl = reader.result;
      };
    }
    this.fileList = [file[file.length - 1]];
  },

2. 上传部分代码

这里我将代码提取到公共方法里了，

export function uploadFile(query,file) {
    let formData = new FormData();
    formData.append("file", file);
    formData.append("busiType", query.busiType);
    formData.append("fileSampleType", query.fileSampleType);
    return request({
      url: '/busi/minio/add',
      method: 'post',
      headers: { 
        'Content-Type':'multipart/form-data;'
      },
      data: formData
    })
}

思路：
将用户填写的三部分通过FormData方式上传,request对象引入的文件就是拦截器

3.注意点

点击上传的时候需要使用的数据是this.fileList[0].raw，而不是this.fileList

submitForm(){
   this.sumbLoading = true
   uploadFile(this.uploadForm, this.fileList[0].raw).then(res => {
     this.$message({
       message:res.code==200?'上传成功！':'上传失败！',
       type:res.code==200?'success':'error'
     })
     if(res.code===200){
       this.open = false
     }
   })
 },

this.fileList打印如下：（该文件为测试的chrome插件文件）,