Vue3は複数のファイルをアップロードし、それらをパラメータとともにアップロードし、バックグラウンドJavaがそれらを受け取ります

コード上で直接

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>

ここでは手動アップロードを使用します。ファイルを選択した後、「保存」をクリックしてアップロード操作をトリガーします。

スクリプトコード

// 上传文件数组
const fileList = ref([]) 

// 文件改变时回调钩子
const handleChange = (file, files) => {
  // file是当前上传的文件，files是当前所有的文件，
  // 不懂得话可以打印一下这两个数据 就能明白
  
  fileList.value = files
}

// 测试多文件上传
const submitUpload = async () => {
  let formData = new FormData()
  formData.append('name', 'myk')
  fileList.value.forEach(item => {
    // 这里有个坑，在将文件append到formData的时候， item其实并不是真是数据 item.raw才是
    formData.append('files', item.raw)
  })
    // 这里是发送请求，注意 headers: {'Content-Type': 'multipart/form-data'}
  let result = await requestUtil.fileUpload('/testUpload', formData)
  console.log(result)
}

ここに .raw を追加しない場合、ファイルは [object Object] であり、String 型としてバックグラウンドに渡されることがわかります。

この String 型「[object Object]」を受け取るには MultipartFile[] を使用しますが、これは絶対に不可能です。

「フィールド 'files' のオブジェクト 'testUploadVo' のフィールドエラー: 拒否された値 [[オブジェクトオブジェクト]]」というエラーが表示されます。

もう一度 .raw を追加してみましょう。ファイルフィールドがバイナリであり、リクエストが正常に送信されたことがわかります。

バックグラウンド印刷を見てみる

ファイルは実際に受信できるので、複数のファイルを試してください

複数ファイルの受信も可能

では、背後にあるコードを見てみましょう

パラメータを受け取るエンティティクラスを作成する

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;
}

コントローラーを作成する場合

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";
    }
}

これはFromDataを使用してフロントエンドによって送信されるため、@requestBodyを追加する必要はありません

複数ファイルの手動アップロードはこれで完了です

アドバイスを歓迎します

Vue3は複数のファイルをアップロードし、それらをパラメータとともにアップロードし、バックグラウンドJavaがそれらを受け取ります

おすすめ