使用FormData上傳二進(jìn)制文件、對象、對象數(shù)組方式

更新時(shí)間：2024年01月02日 09:50:04 作者：洋哥登陸

這篇文章主要介紹了使用FormData上傳二進(jìn)制文件、對象、對象數(shù)組方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

一、FormData上傳 MultipartFile文件

使用element的 el-upload組件上傳文件。

前端使用FormData 傳輸二進(jìn)制文件

<template>
  <div id="app">
    <!-- formData的主要用處
    1. 網(wǎng)絡(luò)請求中處理表單數(shù)據(jù)
    2. 網(wǎng)絡(luò)請求中處理用來異步的上傳文件 -->

    <div class="upload">
      <el-upload
        class="upload-demo"
        drag
        action="#"
        :multiple="false"
        :auto-upload="false"
        :on-change="onChange"
        :on-remove="onRemove"
        :file-list="fileList"
      >
        <i class="el-icon-upload" />
        <div class="el-upload__text">將文件拖到此處，或<em>點(diǎn)擊上傳</em></div>
        <div slot="tip" class="el-upload__tip">只能上傳jpg/png文件，且不超過500kb</div>
      </el-upload>
      <el-button size="medium" @click="upload">上傳</el-button>
    </div>
  </div>
</template>

<script>
import UploadApi from '@/api/upload.js'
export default {
  name: 'FormData',
  data() {
    return {
      fileList: []
    }
  },
  methods: {
    onChange(file, fileList) {
      this.fileList = []
      this.fileList.push(file.raw)
    },
    onRemove() {
      this.fileList = []
    },
    upload() {
      const formData = new FormData()
      formData.append('file', this.fileList[0])
      // 請求服務(wù)端接口
      UploadApi.formData(formData).then(res => {
        this.$message.success(res)
      }).catch(err => {
        this.$message.error(err)
      })
    }
  }
}
</script>

后端服務(wù)器接收

@PostMapping("/formData")
public void useFormData(@RequestParam("file") MultipartFile file){
     System.out.println(file.getName());
     System.out.println(file.getBytes());
     System.out.println(file.getInputStream());
}

二、上傳 MultipartFile文件和數(shù)據(jù)

前端仍然通過append方法添加數(shù)據(jù)

upload() {
      const formData = new FormData()
      formData.append('file', this.fileList[0])
      formData.append('time', 20220730)

      // 請求服務(wù)端接口
      UploadApi.formData(formData).then(res => {
        this.$message.success(res)
      }).catch(err => {
        this.$message.error(err)
      })
    }

后端添加@RequestBody 及實(shí)體類對象接收

@Data
public class Upload {
    private long time;
}

@PostMapping("/formData")
public boolean useFormData(@RequestBody @RequestParam("file") MultipartFile file, Upload upload){
	System.out.println(file.getName());
	System.out.println(file.getBytes());
	System.out.println(file.getInputStream());
	     
	System.out.println(upload.getTime());
}

三、上傳表單數(shù)據(jù)中包含對象

前端append 方法添加數(shù)據(jù)

upload() {
      const formData = new FormData()
      formData.append('file', this.fileList[0])
      formData.append('time', 20220730)
      formData.append('bean.year', 2022)
      formData.append('bean.month', 7)
      formData.append('bean.day', 30)

      // 請求服務(wù)端接口
      UploadApi.formData(formData).then(res => {
        this.$message.success(res)
      }).catch(err => {
        this.$message.error(err)
      })
    }

后端服務(wù)器添加接收對象

@Data
public class Upload {
    private long time;
    private DayBean bean;
}

@Data
public class DayBean {
    private int year;
    private int month;
    private int day;
}

@PostMapping("/formData")
public boolean useFormData(@RequestBody @RequestParam("file") MultipartFile file, Upload upload){
	System.out.println(file.getName());
	System.out.println(file.getBytes());
	System.out.println(file.getInputStream());
	     
	System.out.println(upload.getTime());
	DayBean bean = upload.getBean();
	System.out.println("year:" + bean.getYear() + ", month:" + bean.getMonth() + ", day:" + bean.getDay());
}

四、上傳對象列表

前端需要循環(huán)添加數(shù)據(jù)

upload() {
      const formData = new FormData()
      formData.append('file', this.fileList[0])
      formData.append('time', 20220730)
      for (var i = 0; i < 3; i++) {
        formData.append('bean[' + i + '].year', 2022 + i)
        formData.append('bean[' + i + '].month', 7 + i)
        formData.append('bean[' + i + '].day', 30 + i)
      }

      // 請求服務(wù)端接口
      UploadApi.formData(formData).then(res => {
        this.$message.success(res)
      }).catch(err => {
        this.$message.error(err)
      })
    }

后端服務(wù)器使用對象列表接收

@Data
public class Upload {
    private long time;
    private List<DayBean> bean;
}

@PostMapping("/formData")
public void useFormData(@RequestBody @RequestParam("file") MultipartFile file, Upload upload){
	System.out.println(file.getName());
	System.out.println(file.getBytes());
	System.out.println(file.getInputStream());
	     
	System.out.println(upload.getTime());
	List<DayBean> beanList = upload.getBean();
	for (DayBean bean : beanList) {
		System.out.println("year:" + bean.getYear() + ", month:" + bean.getMonth() + ", day:" + bean.getDay());
	}
}

其他

設(shè)置multipart上傳大小

@Configuration
public class MultipartThemeConfig {

    @Bean
    public MultipartConfigElement multipartConfig(){
        MultipartConfigFactory factory = new MultipartConfigFactory();
        //單個(gè)文件大小200MB，單位KB,MB
        factory.setMaxFileSize(DataSize.parse("5MB"));
        //單個(gè)文件大小200MB，單位KB,MB
        factory.setMaxRequestSize(DataSize.parse("10MB"));
        return factory.createMultipartConfig();
    }
}