直接上代碼

vue代碼 上傳文件組件，采用element-plus

<el-upload
      ref="upload"
      class="upload-files"
      action=""
      name="files"
      multiple
      :auto-upload="false"
      :file-list="fileList"
      :on-change="handleChange"
      style="margin-top: 20px"
  >
    <el-button slot="trigger" type="primary">選取文件</el-button>
  </el-upload>
  <div slot="footer" class="dialog-footer">
    <el-button type="primary" @click="submitUpload">保存</el-button>
  </div>

這里采用的是手動上傳，選取文件后，點擊保存才會觸發(fā)上傳操作

script 代碼

// 上傳文件數(shù)組
const fileList = ref([]) 

// 文件改變時回調(diào)鉤子
const handleChange = (file, files) => {
  // file是當前上傳的文件，files是當前所有的文件，
  // 不懂得話可以打印一下這兩個數(shù)據(jù) 就能明白
  
  fileList.value = files
}

// 測試多文件上傳
const submitUpload = async () => {
  let formData = new FormData()
  formData.append('name', 'myk')
  fileList.value.forEach(item => {
    // 這里有個坑，在將文件append到formData的時候， item其實并不是真是數(shù)據(jù) item.raw才是
    formData.append('files', item.raw)
  })
    // 這里是發(fā)送請求，注意 headers: {'Content-Type': 'multipart/form-data'}
  let result = await requestUtil.fileUpload('/testUpload', formData)
  console.log(result)
}

這個地方如果不添加.raw? 可以看到這個files是個[object Object] 同樣它傳入后臺是個String類型

你用MultipartFile[]來接收這個String類型的 “[object Object]” 這肯定不行啊

就會給你報一個錯?Field error in object 'testUploadVo' on field 'files': rejected value [[object Object]]

?我們再來試試加上.raw 可以看到這是files字段是個二進制，請求也發(fā)送成功了

?看一下后臺打印

?確實可以接收到文件了，那試試多個文件

?多個文件也是可以接收到

現(xiàn)在來看看后臺代碼

創(chuàng)建一個實體類來接收參數(shù)

package com.mayk.controller;

import lombok.Data;
import org.springframework.web.multipart.MultipartFile;

/**
 * @author: mayk
 * @date: 2023/4/13
 */
@Data
public class TestUploadVo {
    private String name;

    private MultipartFile[] files;
}

在創(chuàng)建一個controller

package com.mayk.controller;

import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

/**
 * @author: mayk
 * @date: 2023/4/13
 */
@RestController
@CrossOrigin
public class TestUpload {
    @PostMapping("/testUpload")
    public String testUpload(TestUploadVo testUploadVo) {
        for (MultipartFile file : testUploadVo.getFiles()) {
            System.out.println(file.getOriginalFilename());

        }
        System.out.println(testUploadVo.getName());
        return "ok";
    }
}

不需要添加@requestBody 因為這是前端是采用的FromData提交的

這樣一個手動上傳多文件就完成了

歡迎大佬指點文章來源地址http://www.zghlxwxcb.cn/news/detail-539624.html

到了這里，關于vue3上傳多個文件并攜帶參數(shù)一起上傳，后臺java接收的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！