springboot+vue个⼈博客系统（三）⽂件上传及回显⼀、⽂件上传
⽂件上传是将⽤户放⼊在博⽂中的图⽚上传到服务器中。
1.前端
在mavon-editor中绑定imgAdd，imgDel事件。
<div id="editor" v-on:mousedown="onWrite" v-on:mouseleave="onRead">
<mavon-editor ref=md :ishljs="true" @imgAdd="imgAdd" @imgDel="imgDel" v-model="content" v-bind: ></mavon-editor> </div>
// 绑定@imgAdd event张定涵年龄
戚薇的歌imgAdd(pos, $file) {
// 第⼀步.将图⽚上传到服务器.
this.img_file[pos] = $file;
let formdata = new FormData();
formdata.append('image', $file);
fetch("/api/blog/uploadImg",{
method: 'post',
body: formdata
}).then(result => {
if (!result.ok) {
alert("通信失败，请联系管理员！");
}
return result.json()
}).then((res) => {
sult === true){
姚笛照片/
this.$refs.md.$img2Url(pos, res.url);
}
})
},
imgDel(pos) {
本科报考delete this.img_file[pos];
},
前端将后台返回的⽂件url地址替换⽂本原来的位置。就可以回显了。
2.后端
后端保存⽂件到磁盘，并且返回改地址的url
/
**
* ⽂件上传
* @param image image
* @return Map<String, Object>
*/
@RequestMapping(value = "/uploadImg", method = RequestMethod.POST)
@ResponseBody
public Map<String, Object> uploadFile(MultipartFile image) {
Map<String, Object> map = new HashMap<>(2);
//本地使⽤，上传位置
String rootPath = null;
Property("os.name").startsWith("Windows")) {
rootPath = "D:\\Users\\Documents\\uploads\\";
}else if (Property("os.name").startsWith("Linux")){
rootPath = "/usr/local/upLoads/";
}
//⽂件的完整名称，如spring.jpeg
String filename = OriginalFilename();
//⽂件后缀，如.jpeg
String suffix = filename.substring(filename.lastIndexOf("."));
//创建年⽉⽂件夹
Calendar date = Instance();
File dateDirs = new (Calendar.YEAR) + File.separator + ((Calendar.MONTH) + 1));
//⽬标⽂件
File descFile = new File(rootPath + File.separator + dateDirs + File.separator + filename);
String newFilename = UUID.randomUUID() + suffix;
String parentPath = Parent();
descFile = new File(parentPath + File.separator + newFilename);
//判断⽬标⽂件所在的⽬录是否存在
if (!ParentFile().exists()) {
//如果⽬标⽂件所在的⽬录不存在，则创建⽗⽬录
}
//将内存中的数据写⼊磁盘
try {
} catch (Exception e) {
e.printStackTrace();
<("上传失败，cause:{}", e);
map.put("result", false);
return map;
}
//完整的url
String fileUrl = ":8081/blog/getImg?url=" + descFile;
log.info(fileUrl);
map.put("result", true);
map.put("url", fileUrl);
return map;
}
注意：
String fileUrl = ":8081/blog/getImg?url=" + descFile;
这⼀句⾮常重要，getImg是回显的请求url则是请求的参数。
⼆、回显
前端只需要⼀些样式即可
<div id="content" v-highlight v-html="t" class="markdown-body"></div>
因为前端的img标签的src中就是我们上⾯完整的url，我们只需将这个get请求返回⼀个图⽚⽂件即可。
番鸭@RequestMapping(value = "/getImg", method = RequestMethod.GET)
public void getFile(@RequestParam("url")String url,
HttpServletResponse response) throws IOException {
File file = new File(url);
log.info(url);
ServletOutputStream outputStream = OutputStream();
FileInputStream fileInputStream = new FileInputStream(file);
byte[] bytes = new byte[1024];
while (ad(bytes) != -1){
outputStream.write(bytes);
}
outputStream.flush();
fileInputStream.close();
outputStream.close();
郑爽和张翰的电视剧}
发布评论