摘要:大家好,我是云皓,话不多说,直入正题,获取上传文件自行获取,也可通过的组件来获取,转化为文件,压缩,转换为文件,上传。
1,获取input上传file文件(自行获取,也可通过vant的upload组件来获取)
2,转化为base64文件
3,压缩
4,转换为blob文件
5,上传。
下面直接上代码(本代码段是用用在vue&vantui 里面, 原理都在,可根据自己的需求来相应的修改)
/** * 上传文件 */ uploadImg (blob, base64) { // 接收到回调函数 获取到压缩后 图片文件,然后上传就可以了 const formData = new FormData() // 需要给文件名添加后缀扩展名,否则传到后端的是一个没有扩展名的文件 formData.append("file", blob, ".jpg") formData.append("filename", blob + ".jpg") //此处我自己封装的api接口,大家可以无视,就是上传提交的意思 api.uploadImg(formData) .then(res => { console.log(res) }) }, /** * 获取到的二进制文件 转 base64文件 * @param blob */ blobToBase64 (blob) { const self = this // 绑定this const reader = new FileReader() //实例化一个reader文件 reader.readAsDataURL(blob) // 添加二进制文件 reader.onload = function (event) { const base64 = event.target.result // 获取到它的base64文件 const scale = 0.99 // 设置缩放比例 (0-1) self.compressImg(base64, scale, self.uploadImg) // 调用压缩方法 } }, /** * 压缩图片方法 * @param base64 ----baser64文件 * @param scale ----压缩比例 画面质量0-9,数字越小文件越小画质越差 * @param callback ---回调函数 */ compressImg (base64, scale, callback) { console.log(`执行缩放程序,scale=${scale}`) // 处理缩放,转换格式 // 下面的注释就不写了,就是new 一个图片,用canvas来压缩 const img = new Image() img.src = base64 img.onload = function () { const canvas = document.createElement("canvas") const ctx = canvas.getContext("2d") canvas.setAttribute("width", this.width) canvas.setAttribute("height", this.height) ctx.clearRect(0, 0, canvas.width, canvas.height) ctx.drawImage(img, 0, 0, canvas.width, canvas.height) // 转成base64 文件 let base64 = canvas.toDataURL("image/jpeg") // 根据自己需求填写大小 我的目标是小于3兆 while (base64.length > 1024 * 1024 * 3) { scale -= 0.01 base64 = canvas.toDataURL("image/jpeg", scale) } // baser64 TO blob 这一块如果不懂可以自行百度,我就不加注释了 const arr = base64.split(",") const mime = arr[0].match(/:(.*?);/)[1] const bytes = atob(arr[1]) const bytesLength = bytes.length const u8arr = new Uint8Array(bytesLength) for (let i = 0; i < bytes.length; i++) { u8arr[i] = bytes.charCodeAt(i) } const blob = new Blob([u8arr], { type: mime }) // 回调函数 根据需求返回二进制数据或者base64数据,我的项目都给返回了 callback(blob, base64) } }
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/106939.html
摘要:背景作为一名前端工作人员,相信大家在开发系统的时候,经常有遇到需要这么一种需求,就是需要为用户保存上传的图片,很多小白遇到这个问题的时候,都会虎躯一震,以为会是一个棘手的问题,当你读完这篇文章的时候,你会发现都是你瞎操作了,真相就是这么简单 背景 作为一名前端工作人员,相信大家在开发系统的时候,经常有遇到需要这么一种需求,就是需要为用户保存上传的图片,很多小白遇到这个问题的时候,都会虎...
摘要:背景作为一名前端工作人员,相信大家在开发系统的时候,经常有遇到需要这么一种需求,就是需要为用户保存上传的图片,很多小白遇到这个问题的时候,都会虎躯一震,以为会是一个棘手的问题,当你读完这篇文章的时候,你会发现都是你瞎操作了,真相就是这么简单 背景 作为一名前端工作人员,相信大家在开发系统的时候,经常有遇到需要这么一种需求,就是需要为用户保存上传的图片,很多小白遇到这个问题的时候,都会虎...
摘要:背景作为一名前端工作人员,相信大家在开发系统的时候,经常有遇到需要这么一种需求,就是需要为用户保存上传的图片,很多小白遇到这个问题的时候,都会虎躯一震,以为会是一个棘手的问题,当你读完这篇文章的时候,你会发现都是你瞎操作了,真相就是这么简单 背景 作为一名前端工作人员,相信大家在开发系统的时候,经常有遇到需要这么一种需求,就是需要为用户保存上传的图片,很多小白遇到这个问题的时候,都会虎...
摘要:简介是由团队开发的一个简单的以为主,为辅的现代文件上传组件。采用大文件分片并发上传,极大的提高了文件上传效率。另外分片传输能够更加实时的跟踪上传进度。选择文件的按钮。 简介:WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件。在现代的浏览器里面能充分发挥HTML5的优势,同时又不摒弃主流IE浏览器,沿用原来的...
阅读 1931·2021-11-16 11:45
阅读 3625·2021-09-06 15:02
阅读 1986·2019-08-30 15:44
阅读 2267·2019-08-30 11:21
阅读 1831·2019-08-29 16:31
阅读 3403·2019-08-29 13:55
阅读 1881·2019-08-29 12:15
阅读 3224·2019-08-28 18:05