springBoot的文件上傳功能

知識點：

      後臺：將上傳的圖片寫入指定服務器路徑，保存起來，返回上傳後的圖片路徑（在springBoot中，參考博客：http://blog.csdn.net/change_on/article/details/59529034）

      前端：在Vue.js前端框架中，使用Vue_Core_Image_Upload插件，上傳圖片 （github地址：https://github.com/Vanthink-UED/vue-core-image-upload）

 

 

後臺：

     1）在Controller中寫一個方法，處理上傳圖片文件

package com.hand.hand.controller;

import com.hand.hand.util.FileUtil; //文件工具類
import org.springframework.http.ResponseEntity;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.CrossOrigin;
import javax.servlet.http.HttpServletRequest;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;


/**
 * Created by nishuai on 2017/12/26.
 */
@CrossOrigin
@Controller
public class FileUploadController {


 //處理文件上傳
 @RequestMapping(value="/uploadimg", method = RequestMethod.POST)
 public @ResponseBody String uploadImg(@RequestParam("file") MultipartFile file,
 HttpServletRequest request) {
 
 String contentType = file.getContentType(); //圖片文件類型
 String fileName = file.getOriginalFilename(); //圖片名字

 //文件存放路徑
 String filePath = "C:\\Users\\Administrator\\Desktop\\vue-manage-system-master\\static\\uploadimg\\";
 
 //調用文件處理類FileUtil，處理文件，將文件寫入指定位置
 try {
 FileUtil.uploadFile(file.getBytes(), filePath, fileName);
 } catch (Exception e) {
 // TODO: handle exception
 }

  // 返回圖片的存放路徑
 return filePath;
 }

}

2）FileUtil工具類，實現uploadFile方法

package com.hand.hand.util;
import java.io.File;
import java.io.FileOutputStream;

/**
 * Created by nishuai on 2017/12/26.
 */
public class FileUtil{

 //文件上傳工具類服務方法

 public static void uploadFile(byte[] file, String filePath, String fileName) throws Exception{

 File targetFile = new File(filePath);
 if(!targetFile.exists()){
 targetFile.mkdirs();
 }
 FileOutputStream out = new FileOutputStream(filePath+fileName);
 out.write(file);
 out.flush();
 out.close();
 }
}

前臺
3）Vue中使用Vue-core-images-upload插件實現圖片的上傳功能（可看考官方文檔）

<div class="img">
 <img class="pre-img" :src="src" alt="">
 <vue-core-image-upload :class="['pure-button','pure-button-primary','js-btn-crop']"
 :crop="false"
 text="上傳圖片" 
 inputOfFile="file" //輸出文件的名稱
 url="http://localhost:5050/uploadimg" //服務器api
 extensions="png,gif,jpeg,jpg"
 @imageuploaded="imageuploaded"  //圖片上傳成功後調用此方法
 @errorhandle="handleError"></vue-core-image-upload>
</div>

<script>
 import VueCoreImageUpload from 'vue-core-image-upload'

 export default {
 components: {
 'vue-core-image-upload': VueCoreImageUpload,
 },
 data() {
 return {
 src: './static/img/hospital1.jpg' //默認的圖片路徑
 }
 },
 methods: { 

 imageuploaded(res) {     //圖片上傳成功後調用此方法，res爲返回值爲服務器存放圖片的路徑，再將圖片路徑賦值給src
            console.log("文件上傳成功！");
 this.src=res;
 
 },
 handleError(){  //圖片上失敗後調用此方法
 console.log("文件上傳失敗！");
  
 this.$notify.error({
 title: '上傳失敗',
 message: '圖片上傳接口上傳失敗，可更改成本身的服務器接口'
 });
 }

 }
 };
</script>

4）前端頁面效果，點擊上傳圖片可調用，http://localhost:5050/uploadimg後端接口