vue上传图片自动压缩,vue 压缩图片
这篇文章主要介绍了某视频剪辑软件在图片上传的时候压缩图片，帮助大家缓解服务器压力，提高程序性能，感兴趣的朋友可以了解下
需求：
上传到服务器的图片太大会导致服务器承受不了，故在前端传图片的时候将图片压缩后再传到服务器
直接上代码
异步getRealName(){
让nickname=this.nickname.trim()
让idnum=this.idnum.trim()
let nameReg=/[\u4e00-\u9fa5]/gm
let idnumReg=/^[a-z0-9] $/i
设郑1=文档。getelementbyid(“文件1”).文件[0]
设风扇1=文档。getelementbyid(“文件2”).文件[0]
如果(昵称。长度1) {
回敬吐司(请输入姓名)
}
if(idnum.length 1) {
回敬吐司(请输入身份证号码)
}
如果(!郑1) {
回敬吐司(请上传身份证信息页)
}
如果(!fan1) {
回敬吐司(请上传身份证国徽页)
}
if(zheng1.size/1024 1025) {
这个。img压缩(郑1,{质量：0.2},郑)
}否则{
这个。郑=郑一
}
if(fan1.size/1024 1025) {
这个。img压缩(风扇1，{质量：0.2}，“风扇”)
}否则{
this.fan=fan1
}
setTimeout(()={
让数据=新表单数据()
数据追加(昵称，昵称);//添加形式表单中其他数据
data.append(idnum ，idnum)
数据追加(郑，这个。郑，郑1 .姓名)
data.append(fan ，this.fan，fan1.name)
让API auth=本地存储。getitem( API auth )
让配置={
标头：{ Content-Type : multipart/form-data }，
牧民：{apiauth:apiauth}
}
axios。邮政( http://API 139。ys11。IPF西科。com/index/index/real name ，data，config).然后((res)={
Toast(res.data.msg)
if(res.data.code==1) {
这个1000美元路由器。替换({路径：/msite })
}
})
},1000)
},
//图片压缩
imgCompress(路径，对象，状态){
let _this=this //这里的这是把某视频剪辑软件的实例对象指向改变为_这个
var img=new Image()；
if(状态==郑){
img。src=_ this。阿凡达1；
}否则{
img.src=_this.avatar2
}
img.onload=function(){
var that=this//这里的这是把图片的对象指向改变为那
//默认按比例压缩
var w=宽度，
h=高度，
比例=宽/高；
w=对象宽度 w
h=obj。height (w/scale)；
定义变量质量=0.7;//默认图片质量为0.7
//生成帆布
var canvas=文档。createelement(“canvas”)；
var CTX=画布。获取上下文(“2d”)；
//创建属性节点
var anw=文档。创建属性(“宽度”)；
anw。nodevalue=w；
var Anh=文档。创建属性(“高度”)；
安。nodevalue=h；
画布。setattributenode(anw)；
画布。setattributenode(Anh)；
ctx.drawImage(即，0，0，w，h)；
//图像质量
如果(obj。质量。质量=1对象。质量0){
质量=物体质量
}
//质量值越小，所绘制出的图像越模糊
var base64=画布。toda taurl( image/JPEG ，质量)；
//回调函数返回base64的值
var URL file=_ this。转换base 64 urltoblob(base64)//这个地方的处理是为了把压缩的base64转化为对象，获得压缩后图片的大小尺寸，方便对压缩后的图片再次进行判断；
//console.log(urlFile)
让file=_ this。blobtofile(URL文件，路径名)
console.log(文件)
if(状态==郑){
_this.zheng=file
}否则{
_this.fan=file
}
if(urlFile.size/1024 1025){
吐司(图片过大，请重新上传图片)
}
}
},
转换base 64 urltoblob(URL数据){
var arr=urlData.split(，)，mime=arr[0].匹配(/:(。*?);/)[1],
bstr=atob(arr[1])，n=bstr.length，u8 arr=new uint 8 array(n)；
while(n - ){
u8arr[n]=bstr。charcodeat(n)；
}
返回新的Blob([u8arr]，{ type:mime })；
},
blobToFile(theBlob，fileName){
那个斑点。lastmodifieddate=new Date()；
theBlob.name=fileName
返回斑点；
},
更改图像(e) {
console.log(e.target.files)
if(e.target.files[0]){
this.ownImg=false
var file=e . target。文件[0]；
console.log(文件)
让filemaxsize=4096
让size=file.size/1024
if (size filemaxsize){
吐司(您上传的图片过大，请重新选择)
this.disabled=true
this.formatImg=false
返回错误的
}
var name=file.name
定义变量文件类型=[。jpg ， .png ]；
如果（姓名){
var isNext=false
var fileEnd=name。子串(名称。(“.”的索引)));
for(var I=0；我文件类型。长度；i ) {
如果(文件类型[我]==文件结束){
console.log(文件类型[我])
isNext=true
this.disabled=false
this.formatImg=true
打破；
}
}
如果(!isNext){
吐司(暂不支持该类型图片);
名称="";
this.disabled=true
this.formatImg=false
返回错误的
}
}
var reader=new FileReader()
变那个=这个
var图像=新图像()
reader.readAsDataURL(文件)
reader.onload=函数(e) {
that.avatar1=this.result
}
}
},
变更（事件){
var file=event.target.files[0]
var name=file.name
定义变量文件类型=[。jpg ， .png ]；
如果（姓名){
var isNext=false
var fileEnd=name。子串(名称。(“.”的索引)));
for(var I=0；我文件类型。长度；i ) {
如果(文件类型[我]==文件结束){
console.log(文件类型[我])
isNext=true
this.disabled=false
this.formatImg=true
打破；
}
}
如果(!isNext){
吐司(暂不支持该类型图片);
名称="";
this.disabled=true
this.formatImg=false
返回错误的
}
}
var reader=new FileReader()
变那个=这个
reader.readAsDataURL(文件)
reader.onload=函数（事件){
that.avatar2=this.result
}
}
以上就是某视频剪辑软件在图片上传的时候压缩图片的详细内容，更多关于某视频剪辑软件压缩图片的资料请关注我们其它相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。