vue实现文件上传，FormData传入后台_vue上传文件到后端

 单文件，多文件看需求都没问题，前端代码弹窗界面如下：

:visible.sync="excelVisible" 默认false自定义，ture开始弹窗，改变值是uploadaaa()

                        <!-- excel上传弹窗 -->
    <el-dialog title="excel上传"
               :visible.sync="excelVisible"
               width="40%"
               :show-close="false"
               :before-close="handleClose">
      <el-form label-width="140px"
               label-position="right">
        <el-row>
          <el-col>
            <el-form-item label="上传文件"
                          prop="fileName">
              <el-input v-model="fileName"
                        :readonly='true'
                        placeholder="文件名"
                        style="width:300px;">
              </el-input>
        
            <el-upload class="upload-demo"
                       ref="upload"
                       action="doUpload"
                       :limit="1"
                       :file-list="fileList"
                       style="float:right"
                       :before-upload="beforeUpload">
              <el-button slot="trigger"
                         type="primary"
                         
                         plain>选取文件</el-button>
            </el-upload>
        
            </el-form-item>
 
           
           
          
          </el-col>
          
        </el-row>
        <el-row>
          <el-col :span="24">
            <div class="btns-center mb-48 pt-48" style="float:right">
              <el-button @click="handleCloses">取 消</el-button>
              
              <el-button type="primary"
                         @click="submitUpload">确 定</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>

methods:

自定义，这里我除去加了excelVisible 弹窗控制还有其他需求
  uploadaaa () {
      this.excelVisible = true;
      var _this = this
      _this.parameterDto = {
        locationCode: '',
        steelType: '',
        locationMaxNum: '',
        current: 1,
        size: 10
      }
      this.listLoading = true
      selectBucketList(_this.parameterDto).then(response => {
        if (response.code === 200) {
          debugger
          this.bucketList = response.data
          this.total = response.count
          this.listLoading = false
        }
      })
     //复原
      var _this = this
      _this.parameterDto = {
        locationCode: '',
        steelType: '',
        locationMaxNum: '',
        current: 1,
        size: 10
      }
      this.listLoading = true
      selectMinIoList(_this.parameterDto).then(response => {
        console.log(response)
        debugger
        if (response.code === 200) {
          this.locationList = response.data
          this.total = response.count
          this.listLoading = false
        }
      })
      //还原上传弹窗
      this.bucket = '';
      this.show5 = false; 
      this.show6 = false;
      this.show7 = false;
    },     
 
上传文件检查文件格式并且赋值filename
beforeUpload (file) { // 上传前 文件校验
      this.files = file;
      debugger
      // 1
     // const extension = file.name.split('.')[1] === 'xls'
    //  const extension2 = file.name.split('.')[1] === 'xlsx'
    //  const isLt2M = file.size / 1024 / 1024 < 2
     // if (!extension && !extension2) {
      //  this.$message.warning('上传文件只能是 xls、xlsx格式!')
      //  return
    //  }
     // if (!isLt2M) {
    //    this.$message.warning('上传文件大小不能超过 2MB!')
     //   return
     // }
     // this.fileName = file.name;
     //
     this.fileName = file.name;
     this.showVisible = true;
     this.show5 = true;
      return false // 返回false不会自动上传
    },
 
 
文件确认上传准备进入后台
submitUpload (bucket) { // 确认上传
 
      if(bucket == ""){
   this.$message({
          message: '请选择要上传的目录！',
          type: 'warning',
        })
        return false;
       }
      if (this.fileName == "") {
        this.$message({
          message: '请选择要上传的文件！',
          type: 'warning',
        })
        return false;
      }
      debugger
      let fileFormData = new FormData();
      this.detailsVisibles = true;
      this.excelVisible = false;
      fileFormData.append('file', this.files,this.fileName);  // 上传的文件
      fileFormData.append('file', this.files,this.fileNames);  // 上传的文件2
      fileFormData.append("bucket",bucket)
      console.log(fileFormData)
      this.loading = true;
      uploadEmployees(fileFormData).then(res => { // 上传请求
    
        if (res.code == 200) {
          this.$message({
              type: 'success',
              message: '上传成功!'
            })
 
      this.listLoading = true
      selectMinIoList(this.parameterDto).then(response => {
        this.locationList = response.data
        this.total = response.count
        this.listLoading = false
      })
            this.detailsVisibles = true
            console.log("1="+this.list1[0])
            console.log("2="+this.list2)
            console.log("3="+this.list3)
            this.excelVisible = false;
        }
      }).catch(err => {
        this.fileName = '';
         this.fileNames = '';
        console.log(err);
        this.loading = false;
 
      })
    },

vue请求地址

后台就是注意类头代码基本就是按需求来了，多文件MultipartFile记得带[ ],单文件可以不用也可以带