SSM+Vue文件上传实现

前端用的ElementUI的上传组件，然后直接调用后台的接口。
讲解都写成注解了，哪里有意见或者不明白欢迎来评论。
1、后台代码：主要使用了SpringMvc提供的MultipartFile类

@CrossOrigin
@RestController
@RequestMapping("/upload")
public class UploadController {
	@Autowired
   private HttpServletRequest request;
	@CrossOrigin
	@PostMapping(value="/native",produces = {"text/plain;charset=UTF-8"})
	public String nativeUpload(@RequestParam("file") MultipartFile file){
		 //获取上传文件的原始名称
        String originalFilename =  file.getOriginalFilename();
        
		String path = request.getSession().getServletContext().getRealPath("").toString()+"/upload/";
		String filePath=path+"/"+file.getOriginalFilename();
		File desFile=new File(filePath);
		//如果文件夹不存会直接创建。
		if(!desFile.getParentFile().exists()){
			desFile.mkdirs();
		}
		try {
			file.transferTo(desFile)；
		} catch (IOException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		return "http://localhost:8888/schoolms/upload/"+newFileName;
		//return filePath;
	}

2、前端代码

<el-upload
  class="upload-demo"
  action="你的后台接口地址"
            //文件上传成功时发生
           :on-success="handleAvatarSuccess"
           //文件选取之前发生
          :before-upload="beforeAvatarUpload"
  multiple
  //设置显示已上传的文件的个数
  :limit="3"
  :file-list="fileList">
  <el-button `size="small" type="primary" :src="imageUrl" >点击上传
</el-button>
  <div slot="tip" class="el-upload__tip">只能上传XXX文件</div>
</el-upload>

data(){
return{
 imageUrl: '',
}
},
method(){
  //文件上传
 handleAvatarSuccess(res, file) {
   if(file.response){
   var self=this;
        self.imageUrl = file.response;
   //   console.log(self.imageUrl);  
   }
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === '.jpg/.jpeg';
        const isLt10M = file.size / 1024 / 1024 < 10;
      if (!isJPG) {
       this.$message.error('上传文件只能是 jpg/jpeg格式!');
       }
        if (!isLt10M) {
          this.$message.error('上传文件大小不能超过 10MB!');
       }
        return   isLt10M; //isJPG &&
      },
}

以上代码就可以实现文件的上传了，希望对在开发之中的伙伴有帮助，那里不明白欢迎大家一起讨论，共同进步。