*vue+webpack环境,这里的that指到vue实例


<input type="file" name="file" accept="image/*" @change="selectImgs" ref="file" />

一、图片压缩


/*
file:文件(类型是图片格式),
obj:文件压缩后对象width, height, quality(0-1)
callback:容器或者回调函数
*/
photoCompress(file,obj,callback){
let that=this;
let ready=new FileReader();
/*开始读取指定File对象中的内容. 读取操作完成时,返回一个URL格式的字符串.*/
ready.readAsDataURL(file);
ready.onload=function(){
let re=this.result;
that.canvasDataURL(re,obj,callback) //开始压缩
}
},

/*利用canvas数据化图片进行压缩*/
/*图片转base64*/
canvasDataURL(path, obj, callback){ let img = new Image();
img.src = path;
img.onload = function(){
let that = this; //指到img
// 默认按比例压缩
let w = that.width,
h = that.height,
scale = w / h;
w = obj.width || w;
h = obj.height || (w / scale);
let quality = 0.7; // 默认图片质量为0.7
//生成canvas
let canvas = document.createElement('canvas');
let ctx = canvas.getContext('2d');
// 创建属性节点
let anw = document.createAttribute("width");
anw.nodeValue = w;
let anh = document.createAttribute("height");
anh.nodeValue = h;
canvas.setAttributeNode(anw);
canvas.setAttributeNode(anh);
ctx.drawImage(that, 0, 0, w, h);
// 图像质量
if(obj.quality && obj.quality <= 1 && obj.quality > 0){
quality = obj.quality;
}
// quality值越小,所绘制出的图像越模糊
let base64 = canvas.toDataURL('image/jpeg', quality);
// 回调函数返回base64的值
callback(base64);
}
},

二、base64转文件

这里后台接口不支持base64,根据实际接口情况使用


/*这里转blob*/
base64UrlToBlob(urlData){
let arr = urlData.split(','),
mime = arr[0].match(/:(.*?);/)[1], // 去掉url的头,并转化为byte
bstr = atob(arr[1]), // 处理异常,将ascii码小于0的转换为大于0
n = bstr.length,
u8arr = new Uint8Array(n);
while(n--){
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], {type:mime});
//转file
//return new File([u8arr], filename, {type:mime});
},

三、上传图片


selectImgs(e) { //选择文件后执行
let that=this
let fileObj=e.target.files[0] //获取file
//console.log(fileObj)
var form = new FormData(); // 创建FormData 对象
if(fileObj.size/1024 > 1025) { //文件大于1M(根据需求更改),进行压缩上传
that.photoCompress(fileObj, { //调用压缩图片方法
quality: 0.2
}, function(base64Codes){
//console.log("压缩后:" + base.length / 1024 + " " + base);
let bl = that.base64UrlToBlob(base64Codes);
//console.log(bl)
form.append("file", bl, "file_"+Date.parse(new Date())+".jpg"); // 文件对象
that.imgRequest(form); //请求图片上传接口
});
}else{ //小于等于1M 原图上传
form.append("file", fileObj); // 文件对象
that.imgRequest(form); //请求图片上传接口
}
},

/*图片上传接口*/
imgRequest(param){
PostSaveImg( //封装的ajax(axios)方法
param
).then(data => {
if (data.status === 200 || data.status === 304){
let item={
path:this.imgpath+data.data[0].path,
}
let jsonitem={
jlid:this.jlid,
path:data.data[0].path,
xxdm:this.xxdm,
}
this.imglistJson.push(jsonitem)
this.imglist.push(item)
}else{
Toast({ //封装的提示方法
message: '图片上传失败',
position: 'middle',
duration: 2000
})
}
}) /*原生请求*/
// const xhr = new XMLHttpRequest()
// xhr.open('POST', HOSTMOBILE+'api/mobile/xcjg/sctp', true) //接口地址
// xhr.send(param)
// xhr.onload = () => {
// if (xhr.status === 200 || xhr.status === 304) {
// let datas = JSON.parse(xhr.responseText)
// console.log('response: ', datas)
// } else {
// alert(`${xhr.status} 请求错误!`)
// }
// } },

其他

element ui 图片上传组件(不包含压缩)

来源:https://segmentfault.com/a/1190000015987551

JS—图片压缩上传(单张)的更多相关文章

  1. js 图片压缩上传(base64位)以及上传类型分类

    一.input file上传类型 1.指明只需要图片 <input type="file" accept='image/*'> 2.指明需要多张图片 <input ...

  2. js 图片压缩上传(纯js的质量压缩,非长宽压缩)

    下面是大神整理的demo,很实用,这里存一下备用,感谢大神! 此demo为大于1M对图片进行压缩上传 若小于1M则原图上传,可以根据自己实际需求更改. demo源码如下 <!DOCTYPE ht ...

  3. js图片压缩上传

    最近公司的移动产品相约app要做一次活动,涉及到图片上传,图片又不能太大,不然用户体验太差,必须先压缩再上传,所以用到了html5的canvas和FileReader,代码先上,小弟前端经验不足,代码 ...

  4. 基于vue + axios + lrz.js 微信端图片压缩上传

    业务场景 微信端项目是基于Vux + Axios构建的,关于图片上传的业务场景有以下几点需求: 1.单张图片上传(如个人头像,实名认证等业务) 2.多张图片上传(如某类工单记录) 3.上传图片时期望能 ...

  5. 纯原生js移动端图片压缩上传插件

    前段时间,同事又来咨询一个问题了,说手机端动不动拍照就好几M高清大图,上传服务器太慢,问问我有没有可以压缩图片并上传的js插件,当然手头上没有,别慌,我去网上搜一搜. 结果呢,呵呵...诶~又全是基于 ...

  6. 三款不错的图片压缩上传插件(webuploader+localResizeIMG4+LUploader)

    涉及到网页图片的交互,少不了图片的压缩上传,相关的插件有很多,相信大家都有用过,这里我就推荐三款,至于好处就仁者见仁喽: 1.名气最高的WebUploader,由Baidu FEX 团队开发,以H5为 ...

  7. Html5+asp.net mvc 图片压缩上传

    在做图片上传时,大图片如果没有压缩直接上传时间会非常长,因为有的图片太大,传到服务器上再压缩太慢了,而且损耗流量. 思路是将图片抽样显示在canvas上,然后用通过canvas.toDataURL方法 ...

  8. 基于H5+ API手机相册图片压缩上传

    // 母函数 function App(){} /** * 图片压缩,默认同比例压缩 * @param {Object} path * pc端传入的路径可以为相对路径,但是在移动端上必须传入的路径是照 ...

  9. 分享图片压缩上传demo,可以选择一张或多张图片也可以拍摄照片

    2016-08-05更新: 下方的代码是比较OLD的了,是通过js进行图片的剪切 旋转 再生成,效率较低. 后来又整合了一个利用native.js本地接口的压缩代码 ,链接在这 .页面中有详细的说明, ...

随机推荐

  1. Fresnel Reflection - 菲涅尔反射

    [Fresnel Reflection - 菲涅尔反射] “菲涅尔”是一个人的名字,因为他发现了一个有关反射的光学现象,这个现象就用这个人的名字命名了.那么,是什么现象呢? 这就是反射/折射与视点角度 ...

  2. json_decode返回NULL

    最近在调用某公司的API时,将对方返回的数据,使用PHP的json_decode函数解析,但是返回NULL,最终排查为对方传送来的json格式有误 打印$_REQUEST,数据结构大致如下: arra ...

  3. 【iCore3 双核心板】例程四:USART通信实验——通过命令控制LED

    实验指导书及代码包下载: http://pan.baidu.com/s/1pJxluWF iCore3 购买链接: https://item.taobao.com/item.htm?id=524229 ...

  4. [shell实例]——用脚本实现向多台服务器批量复制文件(nmap、scp)

    练习环境: (1)所有服务器将防火墙和selinux关闭 (2)所有服务器的root密码设置为aixocm (3)所有服务器都为10.0.100.*网段,并保证能够和其它主机通信 (4)所有服务器确保 ...

  5. OpenJudge/Poj 2000 Gold Coins

    1.链接地址: http://bailian.openjudge.cn/practice/2000 http://poj.org/problem?id=2000 2.题目: 总Time Limit: ...

  6. JS自动合并表格

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. Day 16: Goose Extractor —— 好用的文章提取工具

    Day 16: Goose Extractor -- 好用的文章提取工具 Day 16: Goose Extractor -- 好用的文章提取工具

  8. python基础-安装篇

    1.安装之前我们要先去python的官网下载python的安装包 下载地址:https://www.python.org/downloads/ Python 官网有两个版本一个是3.5.2(最新版)一 ...

  9. javascript组成概述认识

    这里的JavaScript组成概述是说的在浏览器端渲染的JavaScript而不是nodejs js组成概述 js的完整实现是由ECMAscript.DOM.BOM三个部分组成的: -ECMAscri ...

  10. Tp框架之模型层

    数据模型层是专门针对数据库来操作的 我们在home模块用一下数据模型层 先把配置修改好 我们先来打开这个文件 然后再打开think里面的主配置,把那里面关于数据库的部分,复制到home下的配置文件,然 ...