在vue中图片上传到服务器下指定路径，并实现根据图片路径调取后台接口返回图片流在vue页面展示图片

一、图片上传

1、前台上传

    <template slot-scope="scope"><el-button type="text" @click="detail(scope.row)">{{scope.row.NAME}}</el-button></template></el-table-column><el-table-columnlabel="会议主题"prop="THEME"header-align="center"></el-table-column><el-table-columnlabel="会议时间"prop="HY_TIME"header-align="center"width="180"><template slot-scope="scope">{{ scope.row.HY_TIME | formatTime }}</template></el-table-column><el-table-columnlabel="会议状态"prop="STATUS"header-align="center"width="100"><template slot-scope="scope">{{ scope.row.STATUS | formatStatus }}</template></el-table-column><el-table-columnlabel="操作"width="200"header-align="center"align="center"><template slot-scope="scope"><el-uploadclass="upload-demo"action="/vseaf-service/meeting/expertupload":on-preview="handlePreview":on-remove="handleRemove":before-remove="beforeRemove"multiple="false":limit="1":on-exceed="handleExceed":file-list="fileList":before-upload="beforeUpload":on-success="handleAvatarSuccess":data="uploadData"><el-tooltipcontent="只能上传jpg/png文件，且不超过500kb"placement="top"><el-button size="small" type="primary" @click="getHyid(scope.row)">签章上传</el-button></el-tooltip></el-upload></template></el-table-column>
</el-table>
<el-paginationstyle="float: right":current-page="searchForm.page":page-size="searchForm.pageSize":total="total"@current-change="handleCurrentChange"@size-change="handleSizeChange":page-sizes="[10, 30, 50]"layout="total,sizes,prev,pager,next"
></el-pagination>
</div>getHyid(row){this.HYID=row.ID;this.uploadData.hyId=row.ID;
},
// 文件上传成功时的钩子
handleAvatarSuccess(res, file) {if (res.meta.success) {this.$message.success("上传成功");this.initTable();} else {this.$message.error("上传失败");}
},

2、后台上传接口

     file:uploadFolder: E:\production\vsproductshow\uploadFiles@Value("${file.uploadFolder}")private String uploadFolder;@RequestMapping("/expertupload")@ApiOperation("专家签章上传")public JsonMessage FileUpdate(HttpServletRequest request, MultipartFile file, @RequestParam Map<String, Object> params) {JsonMessage jsonMessage = new JsonMessage();//配置文件设置想保存的路径String str = uploadFolder;//得到上传时的文件名字String originalname = file.getOriginalFilename();
//        String newName = originalname.substring(originalname.lastIndexOf("."));String nowdate = new SimpleDateFormat("yyyyMMddHHmmss").format(new Date());//获取String类型的时间String newName = nowdate +"_"+ originalname;File newFile = new File(str, newName);//获得文件目录，判断是否存在if (!newFile.getParentFile().exists()) {//如果path路径不存在，创建一个文件夹，存在则使用当前文件夹newFile.getParentFile().mkdirs();}try {//保存文件到指定路径之中file.transferTo(newFile);params.put("file_id", nowdate);params.put("file_name", newName);params.put("file_path", str + newName);
//            params.put("browse_path", "..\\..\\static\\img\\signature"+ newName);meetingService.updateSignature(params);//专家签章上传_状态更改System.out.println("上传的文件路径:" + str + newName);jsonMessage.success();} catch (IllegalStateException | IOException e) {e.printStackTrace();jsonMessage.failure(e.getMessage());}return jsonMessage;}

二、图片回显

1、前台根据请求后台获取图片流

  <el-table-columnheader-align="center"align="center"prop="TIME"label="签章"><template slot-scope="scope"><img:ref="'abc' + scope.$index":src="scope.row.FILE_PATH"width="200px"height="50px":onload="onLoadImg(scope.$index,scope.row.FILE_NAME)"/></template></el-table-column>onLoadImg(id, filename) {if(filename!=null){let params ={file_name :filename}axios({url: "/vseaf-service/meeting/getExpertImg",method: "get",responseType: "blob",params: params,}).then((res) => {let url = window.URL.createObjectURL(res.data); // 获取对象urlif (id!=undefined) {this.$refs['abc'+id].src = url;}});}},

2、后台接口

file:uploadFolder: E:\production\vsproductshow\uploadFiles@Value("${file.uploadFolder}")
private String uploadFolder;@GetMapping(value = "/getExpertImg")public void getExpertImg(HttpServletRequest request, HttpServletResponse response, @RequestParam Map<String, Object> params) throws IOException {File file = new File(uploadFolder, params.get("file_name").toString());FileInputStream fis;fis = new FileInputStream(file);long size = file.length();byte[] data = new byte[(int) size];fis.read(data, 0, (int) size);fis.close();response.setContentType("image/png");OutputStream out = response.getOutputStream();out.write(data);out.flush();out.close();}

vue中图片上传及回显相关推荐

java前端接收回显图片_图片上传并回显后端篇
图片上传并回显后端篇我们先看一下效果继上一篇的图片上传和回显,我们来实战一下图片上传的整个过程,今天我们将打通前后端,我们来真实的了解一下,我们上传的文件,是以什么样的形式上传到服务器,难道也是一 ...
layui富文本编辑器上传图片java_解决layui富文本编辑器图片上传无法回显的问题...
layui富文本编辑器用起来挺方便的,但是不足的是不提供图片上传的接口,需要自己写上传接口,而且返回的数据类型要符合layui富文本编辑器图片上传插件的要求,否则图片可以上传成功,但是无法回显,这个问 ...
themyleaf 图片上传_javaEE --springboot #实现图片上传和回显 #单文件上传 #多文件上传 #ajax异步文件上传（非常详细，从创建项目开始）...
实现文件上传和回显 1.新建一个SpringBoot项目,选择 Spring Web 和 thymeleaf 依赖 .pow.xml文件下的依赖如下 2.根据下图,创建如下文件 3.直接上代码配置文 ...
阿里云对象存储OSS图片上传并回显
阿里云对象存储OSS图片上传并回显 Java代码实现引入依赖 <dependency><groupId>com.aliyun. ...
vue中使用wangeditor富文本编辑器（含图片上传和回显）
最近在写vue的项目中,遇到一个需求,点击编辑,显示弹框,在弹框中的富文本编辑器中编辑自定义文本样式,可以上传图片并回显.编辑完成确定后显示在页面上. 首先先写一个editor.vue的页面.(建议单 ...
php多图片上传并回显,如何用input标签和jquery实现多图片的上传和回显功能
本文主要记录如何用input标签和jquery实现多图片的上传和回显,不会涉及后端的交互,大概的效果看图效果图我们从零来做一个这样的demo 第一步: 我们先完善一下我们的页面,默认的input- ...
element显示服务器的图片,Vue+ElementUI+SpringMVC实现图片上传和回显
Vue+ElementUI+SpringMVC实现图片上传和table回显而我们也常遇到表单中包含图片上传的需求,并且需要在table中显示图片,所以这里我就讲一下结合后端的SpringMVC框架如 ...
Vue+ElementUI+SpringMVC实现图片上传和回显
Vue+ElementUI+SpringMVC实现图片上传和table回显在之前我们已经讲过了 Vue+ElementUI+SpringMVC实现分页 . 而我们也常遇到表单中包含图片上传的需求,并 ...
SpringBoot 2.0 多图片上传加回显
点击上方蓝色"方志朋",选择"设为星标" 回复"666"获取独家整理的学习资料! 本文来源:http://r6f.cn/crEY 这两天公司 ...

vue中图片上传及回显

一、图片上传

1、前台上传

2、后台上传接口

二、图片回显

1、前台根据请求后台获取图片流

2、后台接口

vue中图片上传及回显相关推荐

最新文章

热门文章