前后端传输文件

前端UI使用element的update组件，使用手动上传：

<el-upload
    class="upload-demo"
    action=""
    :auto-upload="false"
    :limit="3"
    :on-exceed="handleExceed"
    :file-list="fileList"
    list-type="picture"
    :on-remove="handleChange"
    :on-change="handleChange">
    	<el-button size="small" type="primary" style="margin: 10px">点击上传</el-button>
</el-upload>
    <el-button style="margin: 10px;" size="small" type="success" @click="updatePictures" >上传到服务器</el-button>

export default {
  data() {
    return {
      fileList: [],
    };
  },
  methods: {
    handleExceed(files, fileList) {
      ElMessage.error("最多展示3个文件！");
    },
    handleChange(file, fileList) {
      this.fileList = fileList;
    },
    async updatePictures() {
		......
    },
  }
};

如果是单个文件传输：

function uploadCourseImage(name,image) {
 let data = new FormData();
 data.append("name", name);
 data.append("file", image.raw);
 return axios.post(`${prefix}/uploadImage`, data, {
   headers: {
     "Content-Type": "multipart/form-data"
   }
 });
}

@PostMapping("/uploadImage")
public OkResponse<String> uploadCourseImage(@RequestPart("name") String name, @RequestPart("file") MultipartFile file) {
	...
}

如果是多个文件传输：

function uploadCarouselChart(files){
  let file = new FormData();
  for (let i=0;i<files.length;i++){
    file.append("files",files[i].raw);
  }
  return axios.post("/admin/uploadImage",file,{
    headers: {
      "Content-Type": "multipart/form-data"
    }
  });
}

@PostMapping("/uploadImage")
public OkResponse<String> uploadCarouselChart(MultipartFile[] files) {
	...
}