vue用el-upload实现文件上传

因为我是vue+springboot前后分离，要跨域，就不能用默认的action写请求地址，我用axios时最困扰的就是怎么拿到那个真实的文件，然后给传给后台。

其实可以通过自带的onchanne触发方法获得文件列表，文件信息中那个raw就是真实的文件。

写的时候，刚开始我是直接把el-upload里面的button中加了点击事件，但是每次文件还没选，就已经向后台发出请求了，当然传不过去，于是外面套了个form。

element-ui组件使用可以查看文档：https://element.eleme.cn/#/zh-CN/component/upload

upload.vue

springboot后台 uploadController.java

package com.example.demo.controller;

import java.io.File;
import java.io.FileOutputStream;
import java.io.InputStream;
import java.util.List;

import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.PutMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

import com.example.demo.entity.ListParam;
import com.example.demo.entity.MyUser;
import com.example.demo.entity.Result;

@RestController
@ResponseBody
@CrossOrigin
@RequestMapping("/api")
public class UploadController {
	
	@PostMapping("/uploadUi")
	public Result upFile(@RequestParam("name")String name,@RequestParam("files") MultipartFile[] files ) {
		 System.out.println("开始");
		 System.out.println(name);
		 if(files != null) {
			 for(MultipartFile file : files) {
				String fileName = file.getOriginalFilename();
				System.out.println(fileName);
				try{
					File mkdir = new File("F:\\app\\file");
					if(!mkdir.exists()) {
						mkdir.mkdirs();
					}
					//定义输出流，将文件写入硬盘
					 FileOutputStream os = new FileOutputStream(mkdir.getPath()+"\\"+fileName);
				      InputStream in = file.getInputStream();
				      int b = 0;
				      while((b=in.read())!=-1){ //读取文件 
				        os.write(b);
				      }
				      os.flush(); //关闭流 
				      in.close();
				      os.close();
				      
				}catch(Exception  e) {
					e.printStackTrace();
					return new Result(401,"失败");
				}
			}
			 return new Result(200,"成功");
		 }else {
			 return new Result(401,"文件找不到");
		 }
		
	}
	
}