您好,登录后才能下订单哦!
本篇内容介绍了“Vue.js怎么实现文件上传压缩优化”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!
两种方法 :
第1种是借助canvas的封装的文件压缩上传
第2种(扩展方法)使用compressorjs第三方插件实现
下面来详细介绍两种方法:
封装之前,先要对canvas相关的方法有所了解
<canvas>简单实例如下:
<canvas id="myCanvas" width="200" height="100"></canvas>
注意: 标签通常需要指定一个id属性 (或者其他), width 和 height 属性定义的画布的大小.
使用 style 属性来添加边框:
<canvas id="myCanvas" width="200" height="100" > </canvas>
将base64转换为file文件
const dataURLtoFile = (dataurl, filename) => { let arr = dataurl.split(',') let mime = arr[0].match(/:(.*?);/)[1] let bstr = atob(arr[1]) let n = bstr.length let u8arr = new Uint8Array(n) while (n--) { u8arr[n] = bstr.charCodeAt(n) } return new File([u8arr], filename, { type: mime }) };
使用canvas的方法实现(拓展)
drawImage() 方法在画布上绘制画布。
在画布上定位图像:
context.drawImage(img,x,y);
在画布上定位图像,并规定图像的宽度和高度:剪切图像,并在画布上定位被剪切的部分:
context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
canvas的toDataURL()方法是返回一个包含图片展示的 数据URL。可以使用type 参数其类型,默认为 png 格式
canvas.toDataURL(type, option);
option表示0到1之间的取值,选定图片的质量,默认值是0.92
const imgZip = (file) => { let imgZipStatus = new Promise((resolve, reject) => { let canvas = document.createElement("canvas"); // 创建Canvas对象(画布) let context = canvas.getContext("2d"); let img = new Image(); img.src = file.content; // 指定图片的DataURL(图片的base64编码数据) var Orientation = ''; img.onload = () => { // canvas.width = 400; // canvas.height = 300; canvas.width = img.width; canvas.height = img.height; context.drawImage(img, 0, 0, canvas.width, canvas.height); file.content = canvas.toDataURL(file.file.type, 0.5); // 0.92为默认压缩质量 let files = dataURLtoFile(file.content, file.file.name); resolve(files) } }) return imgZipStatus; };
导出方法imgZip
export { imgZip }
main.js
// 引入imgUpload方法 import * as imgUpload from "./utils/imgUpload" Vue.prototype.$imgUpload = imgUpload;
这里使用了vant ui框架,实现的头像上传,如果用原生的input file方法也是一样的使用方式
<van-uploader :after-read="afterCard" :before-read="beforeRead" accept="image/*" class="arrart" :max-size="10240 * 1024" @oversize="onOversize" ref="uploadFile"> <!-- <div class="loadingWrap" v-show="personCardloading"> <van-loading class="colorCom uploadText" color="#fff" size="24px">{{uploadText}}</van-loading> </div> --> <van-image class="iconImg" round :src="Personal.iconUrl?$baseImgUrl+Personal.iconUrl:require('../../assets/img/touciang.png')" width="64" height="64" /> </van-uploader>
限制上传数量
通过 max-count
属性可以限制上传文件的数量,上传数量达到限制后,会自动隐藏上传区域。
禁用文件上传
通过 disabled
属性禁用文件上传。
<van-uploader disabled />
限制上传大小图片
// 限制上传大小图片 onOversize(file) { console.log(file, "file"); this.$toast("文件大小不能超过 10M"); },
上传之前的图片验证
// 上传之前的图片验证 beforeRead(file) { console.log(file, "file,123"); if (this.$utils.isImage(file.name)) { return true; } else { this.$toast("请上传图片格式"); } },
afterCard方法,当提交了头像,先进行压缩处理,再去把formData文件流 作为参数调用接口,
获取到后台返回的图片路径,再调用更新头像接口,把获取的数据赋值显示头像的img.
// 头像上传 afterCard(file) { this.$imgUpload.imgZip(file).then(resData => { const formData = new FormData(); formData.append("file", resData); // 请求接口上传图片到服务器 uploadImg(formData).then(res => { console.log(res, "图片上传"); if (res.code == 200) { console.log(res.data,"res.data") let params = { bbsIconUrl: res.data, userId: this.id }; compileUserInfo(params) .then(resImg => { console.log(resImg, "resImg"); if (resImg.code == 200) { this.Personal.iconUrl =res.data; this.$toast("头像修改成功"); } else { this.$toast(resImg.msg); } }) .catch(error => {}); } else { this.$toast(res.msg); } }); }); },
如果这里使用原生的input file,可按照如下操作
示例:
<input type="file" id="file" accept="image/*">
import axios from 'axios'; document.getElementById('file').addEventListener('change', (e) => { const file = e.target.files[0]; if (!file) { return; } this.$imgUpload.imgZip(file).then(resData => { const formData = new FormData(); formData.append("file", resData); //接口调用 axios.post('/upload', formData).then((res) => { console.log('Upload success'); }); }) });
compressorjs 是一个开源的图片处理库,提供了图片压缩、图片旋转等能力
语法:
new Compressor(file[, options])
npm install compressorjs --save
ImageCompressor.js
quality:quality || 0.6, //压缩质量,图片压缩比 0-1
import Compressor from 'compressorjs'; export default function ImageCompressor(file, backType, quality) { return new Promise((resolve, reject) => { new Compressor(file, { quality:quality || 0.6, //压缩质量 success(result) { if (!backType || backType == 'blob') { resolve(result) } else if (backType == 'file') { resolve(file) } else { resolve(file) } // resolve(result); }, error(err) { console.log("图片压缩失败"); reject(err); } }) }) }
此插件还能解决ios移动端拍照图片翻转90度问题
import ImageCompressor from '@/utils/ImageCompressor'
这里记得使用 async await,注意使用的file取值,与第一种的方法有所不同
// 头像上传 async afterCard(file) { let newFile = await ImageCompressor(file.file, 'file', 0.6); //图片压缩 const formData = new FormData(); formData.append("file", newFile); uploadImg(formData).then(res => { if (res.code == 200) { this.centerInfo.iconUrl = res.data; let params = { iconUrl: res.data, id: this.id, loginType: this.loginType }; updateMineIconUrl(params) .then(resImg => { console.log(resImg, "resImg"); if (resImg.code == 200) { this.$toast("头像修改成功"); } else { this.$toast(res.msg); } }) .catch(error => {}); } else { this.$toast(res.msg); } }); },
如果这里使用原生的input file,可按照如下操作
示例:
<input type="file" id="file" accept="image/*">
import axios from 'axios'; import Compressor from 'compressorjs'; document.getElementById('file').addEventListener('change', (e) => { const file = e.target.files[0]; if (!file) { return; } new Compressor(file, { quality: 0.6, success(result) { const formData = new FormData(); formData.append('file', result, result.name); //接口调用 axios.post('/upload', formData).then(() => { console.log('Upload success'); }); }, error(err) { console.log(err.message); }, }); });
“Vue.js怎么实现文件上传压缩优化”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站,小编将为大家输出更多高质量的实用文章!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。