springBoot的文件上传功能
2024-08-24 01:59:34
知识点:
后台:将上传的图片写入指定服务器路径,保存起来,返回上传后的图片路径(在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)
后台:
)在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;
} } )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();
}
} 前台
)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后端接口
最新文章
- category中重写方法?
- HTML5 开发框架
- Excel-漏斗图分析(差异分析)
- SpellTime
- javaweb -- 获取请求IP(附实现源码)
- 带你玩转JavaWeb开发之三 - CSS从基础到实战
- php protected封装
- 浅谈WeakHashMap
- iOS 增加UIButton按钮的可点击区域
- [转] POJ计算几何
- Tree(未解决。。。)
- 使用C语言实现字符串中子字符串的替换
- bzoj3504: [Cqoi2014]危桥 网络流
- ubuntu升级php版本
- 团队作业5-测试与发布(AIpha版本)
- 怎样写一个与Windows10 IE11兼容的标准BHO?
- 质量:“PM,你怎么可以放弃我?!”
- GetBuiltProjectOutputRecursive error running Xamarin Forms iOS on Visual Studio
- JS的__proto__与prototype
- 「NOI2014」购票