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@Controllerpublic 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后端接口

原文地址：https://www.cnblogs.com/shuaifing/p/8137568.html