Springboot + vue 上传图片显示图片

Springboot + vue 上传显示图片
上传图片：
前端：

  <el-uploadclass="upload-facepic"action="#":on-preview="handlePreview":on-remove="handleRemove":before-remove="beforeRemove":multiple="false"ref="upload":http-request="uploadFile1":limit="1":auto-upload="true":on-change="edithandleChange":on-success="handleSuccess":on-exceed="handleExceed":file-list="fileList"><el-button size="small" type="primary">点击上传</el-button><div slot="tip" class="el-upload__tip">只能上传jpg/jpeg/png文件，且不超过500kb</div></el-upload>vue.js:handlePreview(){},handleRemove(file,fileList) {},beforeRemove() {},handleChange (file,fileList) {this.fileList.push(file)},handleSuccess() {},handleExceed () {},handleChange:function (file, fileList) {this.addForm.bookPic = file.name;},edithandleChange:function(file, fileList){this.editForm.bookPic = file.name;},uploadFile(param){let _self = this;let file = param.file;let formData = new FormData();//formData.append("card",JSON.stringify(this.addForm.card));formData.append("typeId",JSON.stringify(this.addForm.typeId));formData.append("file",file);let url = '/api/book/uploadFile';let config = {headers:{'Content-Type':'multipart/form-data'} //这里是重点，需要和后台沟通好请求头，Content-Type不一定是这个值};this.$axios.post(url,formData,config).then(res =>{if(res.data.code ==='0'){this.$message({message:'文件上传成功',type:'success'})}else{this.$message.error(res.data.msg);return false;}});},

后端：

 @PostMapping(value = "/uploadFile")public CommonResponse uploadFile(@RequestParam Map<String,Object> map,@RequestParam("file") MultipartFile file) throws IOException {String typeId = map.get("typeId")==null?"":map.get("typeId").toString();// 文件名String fileName = file.getOriginalFilename();// 在file文件夹中创建名为fileName的文件assert fileName != null;int split = fileName.lastIndexOf(".");// 文件后缀，用于判断上传的文件是否是合法的String suffix = fileName.substring(split+1,fileName.length());//判断文件类型，因为我这边是图片，所以只设置三种合法格式String url = "";String path = PropertiesUtil.class.getClassLoader().getResource("upload/").getPath();if("jpg".equals(suffix) || "jpeg".equals(suffix) || "png".equals(suffix)) {// 正确的类型，保存文件try {path = path + "/" + typeId;File upload = new File(path);if(!upload.exists()) {upload.mkdirs();}File savedFile = new File(path  +"/" +fileName);file.transferTo(savedFile);url = savedFile.getAbsolutePath();System.out.println("图片上传完毕，存储地址为："+"/"+ typeId);} catch (IOException e) {// TODO Auto-generated catch blocke.printStackTrace();}}else {//错误的类型，返回错误提示return new CommonResponse(ProjectConstants.SUCCESS_CODE,"文件上传失败,请重试！",null);}File savedFile;return new CommonResponse(ProjectConstants.SUCCESS_CODE,"文件上传成功",typeId +"/"+fileName);}

vue页面显示图片：
前端：

<img :src="src" />this.$axios.post('/api/book/showImg',{typeId:this.viewForm.typeId,fileName:this.viewForm.bookPic}, {responseType:'blob'}).then(response =>{console.log(response)let blob = new Blob([response.data]);   // 返回的文件流数据let url = window.URL.createObjectURL(blob);  // 将他转化为路径this.src = url})

后端接口：

  /*** 获取图片地址*/@RequestMapping(value = "/showImg")@ResponseBodypublic void showImg(HttpServletRequest request, HttpServletResponse response, @RequestBody Map<String,Object> map) {String typeId = map.get("typeId")==null?"":map.get("typeId").toString();String fileName = map.get("fileName")==null?"":map.get("fileName").toString();String path = PropertiesUtil.class.getClassLoader().getResource("upload/").getPath();File imgFile = new File(path+"/"+typeId+"/"+fileName);FileInputStream fin = null;OutputStream output = null;response.setCharacterEncoding("utf-8");response.setContentType("application/octet-stream");response.setHeader("Content-Disposition","attachment;fileName="+fileName);response.setHeader("Content-type","application/octet-stream");try {output = response.getOutputStream();fin = new FileInputStream(imgFile);byte[] arr = new byte[1024 * 10];int n;while ((n = fin.read(arr)) != -1) {output.write(arr, 0, n);}output.flush();} catch (IOException e) {e.printStackTrace();}try {output.close();} catch (IOException e) {e.printStackTrace();}}

以上以文件流的形式显示图片。

Springboot + vue 上传图片显示图片相关推荐

vue上传图片及其图片回显
HTML部分 <div class="file"><input type="file" class="updata" ac ...
vue 上传图片 base64图片无法显示的问题
后台返回的base64无法显示的原因原因一: 返回的base64中存在换行和空格, 这样前端直接渲染的话就显示不出来解决办法: let strss = `data:image/jpg;base64 ...
计算机毕业设计SpringBoot+Vue.js学前教育图片智能识别系统(百度AI平台)
功能本系统七个部分分别是用户管理模块.用户信息模块.用户留言模块.管理员模块.图片识别模块.学习收藏模块,它们的功能如下: (1) 用户管理模块用户管理模块包含了注册(账号.昵称.密码).登录(不 ...
vue 前端显示图片加token_手摸手，带你用vue撸后台系列二(登录权限篇)
完整项目地址:vue-element-admin https://github.com/PanJiaChen/vue-element-admin 前言拖更有点严重,过了半个月才写了第二篇教程.无奈自 ...
vue 前端显示图片加token_前端甩锅神器：vue中的mock使用
首先声明,本文所介绍的方法,只是用于,在做好前端联调的本分工作之余,把前后端联调责任划清界限,并不用于帮后端定位问题(当然,mock也有更全面的方法促进项目的进行,小女不才,在此不提供介绍): 跟陌生 ...
vue 前端显示图片加token_vue+node.js手把手教你搭建一个直播平台（二）
上一期,帅气的小羽给老铁们介绍了直播平台的项目的后端搭建,这期就让小羽带大家来搭建一下前端的框架. 1.创建前端工程毫无疑问,搭建一个项目的框架,那第一步肯定是得创建一个工程啦.cmd命令,输入vu ...
vue 前端显示图片加token_前端Vue3.0：从0到1手把手撸码搭建管理后台系统
第1节 – 了解项目开发流程手把手撸码前端 – 第1学时了解产品从0到1的开发流程,产品经理.UI设计师.研发部.测试工程师第2节 – 构建vue项目.代码仓库管理手把手撸码前端 – 第2学时 ...
服务器上传图片显示图片404,关于使用spring文件上传遇到的服务器中的图片访问不到报404的问题...
中的enctype确实是"multipart/form-data",后来实在没办法了,他前面提到过找不到类,那会不会是还有jar没有引进去呢,后来发现错误信息里有IOUtils这个 ...
jquery html5 file 上传图片显示图片（上传图片预览）
// html代码 <input type="file" name="path[]" id="file0" /> <im ...

Springboot + vue 上传图片显示图片

Springboot + vue 上传图片显示图片相关推荐

最新文章

热门文章

Springboot + vue 上传图片 显示图片

Springboot + vue 上传图片 显示图片相关推荐

最新文章

热门文章

Springboot + vue 上传图片显示图片

Springboot + vue 上传图片显示图片相关推荐