-
vue 接收后端传输流文件处理为图片或压缩包
2019-07-25 14:26:18处理后台返回流文件,多张图片处理,返回成一个压缩包 处理方法: 就可以下载成一个压缩包了哦 单张图片下载(相当于浏览器下载)- 处理后台返回流文件,多张图片处理,返回成一个压缩包
处理方法:
let blob = new Blob([res.data], { type: 'application/octet-stream;charset=UTF-8' }) let fileName = decodeURI(res.headers['content-disposition'].split('filename*=utf-8')[1]) if (window.navigator.msSaveBlob) { // ie window.navigator.msSaveOrOpenBlob(blob, fileName) return } let elink = document.createElement('a') elink.style.display = 'none' elink.href = window.URL.createObjectURL(blob) elink.download = fileName document.body.appendChild(elink) elink.click() URL.revokeObjectURL(elink.href) document.body.removeChild(elink)
就可以下载成一个压缩包了哦
- 单张图片下载(相当于浏览器下载)
this.$http.post( --接口名---, data, { responseType: 'arraybuffer' }) .then(response => { return 'data:image/png;base64,' + btoa(new Uint8Array(response.data).reduce((data, byte) => data + String.fromCharCode(byte), '')) }) .then(data => { var link = document.createElement('a') link.href = data if (imgsrc.indexOf('.jpg') != -1) { // 判断图片格式,非jpg格式,都已png格式显示 link.download = name + '.jpg' } else { link.download = name } link.click() })
- 处理后台返回流文件,多张图片处理,返回成一个压缩包
-
解决vue中接收到后端图片路径传值相同
2020-12-14 17:05:27在做员工系统时,前端传递图片文件给后端,后端返回的图片路径为姓名+员工部门,此时重新以当前员工身份传递图片时,后端返回的路径仍然为当前员工姓名与员工部门,此时我们传递的新图片已经保存到了后端数据库中...问题背景
在做员工系统时,前端传递图片文件给后端,后端返回的图片路径为姓名+员工部门,此时重新以当前员工身份传递图片时,后端返回的路径仍然为当前员工姓名与员工部门,此时我们传递的新图片已经保存到了后端数据库中。因为后端返回的图片路径不变,导致前端图片不会重新请求数据。
解决办法
我们需要使图片路径不完全相同,才会使得img标签会重新请求新的图片,这时我加入了随机数进行更改图片的完整路径,但不影响图片向真正的地址去请求数据。
代码:/* 上传头像成功时的回调 */ handleAvatarSuccess(res, file) { console.log(res,file) if(res.code == 200){ this.$message.success("上传成功") } //在请求到的图片路径后方加入随机数,使得每次渲染的完整图片路径都不相同,使得图片重新加载 this.imageAvatarUrl = res.data + '?'+ Math.random(); },
问题解决~
-
vue显示图片 后端返回字符串
2019-04-26 15:00:45vue显示多张图片-接收后端数据 后端返回字段如下 可以看见,每张图片的相对路径我用逗号拼接。 前端接收主要代码 <ul style="padding: 3px"> <li class="imgsh" id="imgUrls"><img v-for="item ...vue显示多张图片-接收后端数据
- 后端返回字段如下
可以看见,每张图片的相对路径我用逗号拼接。 - 前端接收主要代码
<ul style="padding: 3px"> <li class="imgsh" id="imgUrls"><img v-for="item in imgurls" :src="require(`../../../image/video_pic/${item}`) "></li> <!--<li><img src="../../../image/video_pic/13163000.jpg"></li>--> <!--<li v-for ="item in imgurls" :key="item.url">--> <!--<img :src="item.url" alt="imgurls">--> <!--<!–<p>{{item.CnName}}</p>–>--> <!--</li>--> </ul>
<img v-for="item in imgurls" :src="require(`../../../image/video_pic/${item}`) ">
src中主要是在vue的目录下建立了文件夹image,再在image下面建立video_pic。要存在vue的根目录才行。网上很多代码直接用变量访问**"…/…/image"** 这种类型的路径,也不知道他们是怎么成功的,反正我没有成功。
直接在src中这样访问当然没有问题,但是一旦加入变量根本不行,我找了好多资料,自己搞了半天才发现必须加require字段才行。不吐槽了- 前端接收后端代码
getPicPath(this.sizeForm.hospitalcard) .then(response => { this.imgurls = response.data.split(','); console.log( this.imgurls); // const target = {}; // let indexs = 0; // imgtemp.forEach(a=>{ // // console.log(a); // const source = JSON.parse(`{"${indexs}":"${a}"}`);//造出对象 // indexs++; // Object.assign(target,source); // }); // console.log(target); })
我的代码进行整合了的,大家测试可以利用axios,直接访问后端端口的接口,比如:
这样就能成功了,保证能行。贴上我的效果图
4. 还有一种就是针对图片少的时候返回base64码的情况,后端当然是直接返回图片的base64码了。
前端是这样的<ul> <li class ="img_iden" id="imgUrl"></li> </ul>
在方法里面,接收返回的数据进行显示,代码为
// let imgurls =[]; // imgurls = res.data.imgUrl.split(","); // for(let i=0;i<imgurls.length;i++){ // let img=new Image(); // img.src ="data:image/jpg;base64,"+imgurls[i]; // console.log(img.src); // img.style.width = 148+"px"; // img.style.height = 148+"px"; // let imgContainer=document.getElementById("imgUrl"); // imgContainer.appendChild(img); // }
这段代码是可行的,只不过我不用这种方法了,就把它注释掉了。因为base64码太长了,我不好调试,占一大块屏幕。
- 后端返回字段如下
-
vue 前端传图片文件,后端接收
2019-05-06 16:31:02vue端 1、在 main.js 文件中添加 const upload = axios.create({ //这里配置你自己的url baseURL: 'http://localhost:8096/reconciliation/', timeout: 50000, }); Vue.prototype.$upload = upload; 2、在...vue端
1、在 main.js 文件中添加
const upload = axios.create({ //这里配置你自己的url baseURL: 'http://localhost:8096/reconciliation/', timeout: 50000, }); Vue.prototype.$upload = upload;
2、在需要上传文件的vue文件中
uploadImg(file){ var _this = this; var formData = new FormData(); formData.append("file", file.raw); _this.$upload.post("file/upload", formData) .then(res => { _this.$message(res.data.userInfo, 'success'); }).catch(data=>{ console.log(data); }) }
3、在后台controller中
@RestController @RequestMapping("file") public class FileDataController { @RequestMapping(value = "/upload", method = RequestMethod.POST) public String handleFileUpload(@RequestParam("file") MultipartFile file) throws IOException { // 将图片转为base64 BASE64Encoder encoder = new BASE64Encoder(); String imgData = encoder.encode(file.getBytes()); String url = null; //这里要进行的图片操作 return url1; } }
-
vue多图片base64上传后端laravel接收
2019-03-30 13:43:441.基于element-ui的多文件上传并存于后端文件夹 这里我们需要用到element-ui中的upload上传upload组件 a:element-ui的安装与使用 (1) 在cmd的vue项目路径或Visual Studio Code的终端下执行 npm i element-ui -S... -
vue项目前端处理后端返回的图片
2020-05-13 16:24:35做登录或者注册的时候,会用到验证码,前端会接收后端发的验证码图片 就像这样的 <el-form-item label="验证码" prop="name"> <el-input style="width: 147px;" v-model="ruleForm.verification" ... -
vue整合axios post请求后端接收不到参数
2018-05-15 14:12:32最近做vue项目,做图片上传的功能,使用get给后台发送数据,后台能收到,使用post给后台发送图片信息的时候,vue axios post请求发送图片base64编码给后台报错HTTP 错误 414请求一直报错,显示 request URI too ... -
vue批量上传图片可预览并传到后端
2020-08-14 18:12:37记一次图片前端传后端遇到的各种大坑。 先阐述几个难点 授人以鱼不如授人以渔 有则共勉,重点已加粗 文章最后再附上源码。 第一点就是打开电脑窗口 怎么实现按住ctrl可以多选文件: (注) accept : 接收类型; ... -
axios 封装上传图片与thinkphp6.0后端接收图片
2021-01-20 02:23:58vue JS export const fileUpload = (File) => { let formData = new FormData(); formData.append('image',File) return axios.request({ url: `admin/upload/logo`, data: formData, method: 'post', ... -
form-data给后端传递参数_VUE发送Formdata数据,NodeJS接收
2020-11-27 03:04:55VUE发送Formdata数据•参数blob是通过this.cropper.getCroppedCanvas().toBlob(blob => { });获取到的。•具体使用方法,参考此链接地址[1]// 这里我使用的是cropperjs插件,裁剪图片成功执行此方法 crop(blob) {... -
关于vue前端的formdata数据发送到后端中的问题
2020-11-02 17:18:04现在我在vue前端用formdata上传图片,通过**http-request设置的接口uploadUserImage发送**,但是由于预设好的拦截器,只能发送**json数据**到go后端,请问是否有避开的方法 前端 ``` httpRequest(params){ ... -
前端处理后端接口传递过来的图片文件
2019-03-25 15:25:28vue axios请求图片流文件前端页面显示处理方法 background url base64 js动态创建样式: style 和 link 正文 这次我接收到的直接是一个图片文件,然后乱码了。。 如下图 要怎么处理呢? 首先是第一步,请求处理,... -
axios post封装对象到后端_axios 使用post方式传递参数,后端接收不到
2020-12-19 21:50:11最近做vue项目,做图片上传的功能,使用get给后台发送数据,后台能收到,使用post给后台发送图片信息的时候,vue axios post请求发送图片base64编码给后台报错HTTP 错误 414请求一直报错,显示request URI too large... -
前端传值后端接收不到_axios 使用post方式传递参数,后端接受不到
2020-12-19 16:54:44最近做vue项目,做图片上传的功能,使用get给后台发送数据,后台能收到,使用post给后台发送图片信息的时候,vue axios post请求发送图片base64编码给后台报错HTTP 错误 414请求一直报错,显示 request URI too ... -
前端传递对象数组,后端使用list接收并解析
2020-04-03 13:39:27使用环境:前端 vue + axios,后端 springBoot 前端 save() { const data = [] // 图片对象数组 data.push({ gpGid: this.gId, gpAddress: this.imgList[0], gpIsCover: 1, }) this.$axios({ ... -
vue 后台返回的文件流进行预览_【图片】萌新求救,Vue+springboot实现下载功能的时候,后端应该返回什么样...
2021-01-15 15:39:05该楼层疑似违规已被系统折叠隐藏此楼查看此楼@RequestMapping("download")public void download(ModelMap modelMap,HttpServletRequest req,HttpServletResponse resp) throws IOException, ServletException{System... -
前端传来的图片并保存_前端处理后端接口传递过来的图片文件
2020-12-20 03:12:36参考:vue axios请求图片流文件前端页面显示处理方法background url base64js动态创建样式: style 和 link正文这次我接收到的直接是一个图片文件,然后乱码了。。 如下图要怎么处理呢?首先是第一步,请求处理,下面... -
axios 使用post方式传递参数,后端接收不到
2018-06-08 17:53:00最近做vue项目,做图片上传的功能,使用get给后台发送数据,后台能收到,使用post给后台发送图片信息的时候,vue axios post请求发送图片base64编码给后台报错HTTP 错误 414请求一直报错,显示request URI too large... -
imYun 一个Go+Vue编写简化打印店工作流程的系统【开源后端+小程序端】
2021-02-10 03:19:09用户到店U盘(微信、QQ)发送文件→店主接收→打印 imYun打印流程: 用户通过小程序上传文件→店主在线预览(下载)&打印 系统截图: [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-... -
php之tp5保存将base64保存为图片、vue上传图片(亲测通过)
2020-01-03 17:49:59背景:前后端分离项目,使用的框架:tp5+vue 概述:近日在开发网页的时候,有上传图片(文件)的问题,于是记录一下...2、thinkphp后端接收多图片: 控制器接口 use app\user\model\UploadModel as UploadModel; pu... -
Vue+SpringBoot上传图片[Vue warn]: Invalid prop: type check failed for prop "image".
2020-04-15 14:06:26Vue+SpringBoot上传图片[Vue warn]: Invalid prop: type check failed for prop “image”. Expected String, got Undefined. 在学习尚硅谷项目因为自己的习惯遇到的问题。 检查前端代码image-cropper,field与后端... -
MyUploader-后端:单文件上传,多文件上传,大文件上传,断点续传,文件秒传,图片上传-源码
2021-02-04 18:22:01预先采用vue.js + plupload + element-ui实现了文件在浏览器端的发送,而采用了spring boot + spring + spring mvc + mybatis实现了文件在服务器端的接收和存储。 本项目为预期实现 效果图 演示地址: : ps:用git... -
springboot+vue+swagger上传图片时遇到的坑
2020-04-11 14:18:53后端使用这样的方式接收图片和一个对象: @ApiOperation(value = "增加分类") @PostMapping(value = "/categories") public Object add(@RequestBody Category category, MultipartFile image, ... -
【js】vue项目内的图片转换为File的形式
2020-06-23 12:48:04后端项目中已有一个接口,接收前端input[type=file]上传的图片文件。但前端需要添加一个重置功能,即将图片重置为默认图片,且不添加新接口。因此,想要利用此接口实现重置功能,即是将项目内的默认图片转换为file... -
vue+springboot,前端使用富文本添加图片过大时请求后台失败
2020-12-26 18:11:16vue+springboot,前端使用富文本添加图片过大时请求后台失败 报错: 控制台报错 或者 后台接收到的参数 为空。 原因: springboot的tomcat限制了post请求的 大小,我的是被限制在2M。添加在富文本的图片使整个...
收藏数
60
精华内容
24