后端向前端返回图片URL，并向后端传递base64格式URL

1.当后端将请求图片的url传给前端，前端无需处理直接放置于img标签即可。

<img class="popover-image" :src="getImgList(image)"/>
// 此处需要对图片url进行处理
getImgList(url) {return getImg(url)
},export function getImg(url) {return `${process.env.VUE_APP_BASE_API}${url}`
}

2.当需要向后端传递base64的数据，处理如下

// 此处为上传方法
this,formData.icon // 表单字段：传图片base64
getBase64(image){var base64 = ''var img = new Image()// 图片预加载：把图片加载到本地，之后就直接到缓存那里拿图片img.onload = () => {base64 = this.image2Base64(img)this.formData.icon}
}image2Base64(img) {var canvas = document.createElement('canvas')canvas.width = img.widthcanvas.height = img.heightvar ctx = canvas.getContext('2d')ctx.drawImage(img, 0, 0, img.width, img.height)var dataURL = canvas.toDataURL('image/png') // 转换为base64编码后图片的格式return dataURL
}

3.当上传图片时，需要对图片的格式、大小等进行限制，处理如下。

// 此处以100KB、100*100、image/jpg为例
beforeUpload(file){const _this = thisconst isImg = ['image/jpg', 'image/png', 'image/jpeg'].indexOf(file.type) > -1const is100KB = file.size / 1024 < 100 // 限制小于100KBif(!is100KB){this.$message.error({ center: true, message: `图片大小不能超过100KB` })return false} else if(isImg){this.$message.error({ center: true, message: '图片格式只支持JPG/PNG' })return false} else {const isSize = new Promise((resolve,reject)=>{const _url = window.URL || window.webkitURLconst img = new image()img.src = _url.createObjectURL(file)img.load = function(){const valid = img.width === 100 && img.height === 100valid ? resolve() : reject()}}).then(()=>{return file},()=>{_this.$message.error({ center: true, message: `图片尺寸只支持100*100` })return Promise.reject()})return isSize}
}// URL对象是硬盘（SD卡等）指向文件的一个路径，如果我们做文件上传的时候，想在没有上传服务器端的情况下看到上传图片的效果图的时候就可是以通过var url=window.URL.createObjectURL(obj.files[0]);获得一个http格式的url路径，这个时候就可以设置到<img>中显示了。
window.webkitURL和window.URL是一样的，window.URL标准定义，window.webkitURL是webkit内核的实现（一般手机上就是使用这个），还有火狐等浏览器的实现

后端向前端返回图片URL，并向后端传递base64格式URL相关推荐

[待解决]自定义头像时使用vue-cropper进行图片裁剪，得到的是base64格式的图片，如何对接file类型的api接口
[待解决]自定义头像时使用vue-cropper进行图片裁剪,得到的是base64格式的图片,如何对接file类型的api接口百度很多都没用,有想法欢迎指点.
php+打开图片二进制文件,php图片文件、二进制流、base64格式相互转化
1,php 图片文件.二进制流.base64格式相互转化$image = 'E:/www/logo.png'; //图片文件地址 $type = getimagesize($image)['mime ...
springboot前后端分离前端请求图片问题
1.前后端分离的情况下,前端通过服务器请求后端图片,通常是后端把图片放在服务器上的指定文件夹中,然后写一个配置类,前端访问后端数据库的图片路径,然后后端在配置文件中做文件映射,前端访问数据库的图片路径 ...
nodejs读取图片并将二进制数据转换成base64格式
首先,使用nodejs进行数据读取,需要用到nodejs的fs模块进行数据读取: fs.readFile('你的资源路径','binary',function(err,data){if(err){co ...
Javaweb8==通过tomcat访问到一段代码并执行，同时读取前端数据和从后端给前端返回数据。通过继承javaEE的HttpServlet类。实现登录注册功能和前端界面。
环境配置:IDEA2021+maven3.8+JDK8+mysql5+mybatis3.5+servlet4+tomcat7+html5+谷歌浏览器+logback日志需求: 注册功能:前端html ...
前后端分离项目后端向前端返回压缩包的方法实现java版
最近公司的项目是让前端有让用户下载zip压缩包(里面都是图片,图片是保存在ftp上的)的任务,经过调研,将最终方案复制在下面: //zip文件的下载@GetMapping("/zip/{im ...
python前后端分离前端权限_Linux上搭建前后端分离项目
一.准备工作 1.准备好服务器 2.Linux上准备搭建环境需要的软件赞赞羊项目需要用到的软件: python.gunicorn.nginx.MySQL.redis 3.开发人员对代码打包前端需要 ...
微信小程序判断服务器返回值res,微信小程序后端怎么给前端返回成功状态码
这要看你的后端是以什么形式给前端返回信息的.比如说是纯文本格式(以为例):header("Content-Type:text/html"); echo "100" ...
vue项目，把图片文件流转为base64格式以图片形式展示在前端
问题描述前台需要展示图片,期望后台直接返回图片地址,但是后台给的是的文件流而不是一个图片地址,需要把文件流转为base64的格式展示出来. 请求后台接口时,返回图片内容如下: 上图不是base64格 ...
前端优化-图片打包处理base64的原因
为什么要将图片打包成base64格式首先我们知道在前端技术中每一张图片的加载都会进行一次http请求,而每次http请求都是需要时间的,所以当网页中图片资源很多的时候,如果不进行base64转译,就 ...

后端向前端返回图片URL，并向后端传递base64格式URL

后端向前端返回图片URL，并向后端传递base64格式URL相关推荐

最新文章

热门文章