this.compress(result, 800, 0.5).then(val => {
//得到压缩图片
let data = val;
that.file = that.dataURLtoFile(data, that.file_name);
//上传
that.upload();
});
  // 压缩图片
compress(base64String, w, quality) {
// var getMimeType = function(urlData) {
// var arr = urlData.split(",");
// var mime = arr[0].match(/:(.*?);/)[1];
// // return mime.replace("image/", "");
// return mime;
// };
var newImage = new Image();
var imgWidth, imgHeight; var promise = new Promise(resolve => (newImage.onload = resolve));
newImage.src = base64String;
return promise.then(() => {
imgWidth = newImage.width;
imgHeight = newImage.height;
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
if (Math.max(imgWidth, imgHeight) > w) {
if (imgWidth > imgHeight) {
canvas.width = w;
canvas.height = (w * imgHeight) / imgWidth;
} else {
canvas.height = w;
canvas.width = (w * imgWidth) / imgHeight;
}
} else {
canvas.width = imgWidth;
canvas.height = imgHeight;
}
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(newImage, 0, 0, canvas.width, canvas.height);
// var base64 = canvas.toDataURL(getMimeType(base64String), quality);
var base64 = canvas.toDataURL("image/jpeg", quality);
console.log(base64);
return base64;
});
}
 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);
}
try {
return new File([u8arr], filename, { type: mime });
} catch (err) {
/**兼容iOS9.3或者Android4.4以下版本*/
console.warn(
"Browser does not support the File constructor,Will use blob instead of file"
);
return this.dataURL2blob(dataurl);
}
},
/**
* dataURL 转成 blob
* @param dataURL
* @return blob
*/
dataURL2blob(dataURL) {
let binaryString = atob(dataURL.split(",")[1]);
let arrayBuffer = new ArrayBuffer(binaryString.length);
let intArray = new Uint8Array(arrayBuffer);
let mime = dataURL.split(",")[0].match(/:(.*?);/)[1];
for (let i = 0, j = binaryString.length; i < j; i++) {
intArray[i] = binaryString.charCodeAt(i);
}
let data = [intArray];
let result;
try {
result = new Blob(data, { type: mime });
} catch (error) {
window.BlobBuilder =
window.BlobBuilder ||
window.WebKitBlobBuilder ||
window.MozBlobBuilder ||
window.MSBlobBuilder;
if (error.name === "TypeError" && window.BlobBuilder) {
var builder = new BlobBuilder();
builder.append(arrayBuffer);
result = builder.getBlob(type);
} else {
throw new Error("没救了");
}
}
return result;
},
async upload() {
try {
let that = this;
let params = { filename: that.file_name };
console.log(params.filename);
//获取签名
Api.barthday2.getsign(params).then(res => {
if (res.code == 0) {
that.uploadFile(res.data.Sign);
} else {
that.$toast.clear();
this.$toast(res.message);
}
});
} catch (err) {
that.$toast.clear();
that.$toast(err);
}
},
async uploadFile(url) {
let that = this;
let config = {
headers: {
"Content-Type": "application/octet-stream"
}
}; //添加请求头
this.$http
.put(url, this.file, config)
.then(response => {
//上传oss成功后把图片地址给服务器 })
.catch(res => {
that.$toast("抱歉,系统异常,上传失败!");
});
},

vue Base64图片压缩上传OSS的更多相关文章

  1. vue里图片压缩上传组件

    //单图上传 <template> <div> <div class="uploader" v-if='!dwimg'> <van-upl ...

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  9. springMVC多图片压缩上传的实现

    首先需要在配置文件中添加配置: <!--配置文件的视图解析器,用于文件上传,其中ID是固定的:multipartResolver--> <bean id="multipar ...

随机推荐

  1. P1092 虫食算——题解

    题目传送 (据说官方正解为高斯消元,但用搜索也能过,这里就讲讲搜索算法吧.) 对于一道搜索题,首先考虑一下大体怎样搜索.因为要考虑加法的进位,所以从左往右搜索对于考虑进位来说十分麻烦,而从右往左搜索就 ...

  2. SQL字串截取函数编写及应用

    SQL里面一种用来截取字符串的方法,用的是表函数实现字符串截取并应用的SQL操作语句中. .截取字符串表函数 ALTER FUNCTION [dbo].[SplitToTable] ( -- Add ...

  3. scipy几乎实现numpy的所有函数

    NumPy和SciPy的关系?   numpy提供了数组对象,面向的任何使用者.scipy在numpy的基础上,面向科学家和工程师,提供了更为精准和广泛的函数.scipy几乎实现numpy的所有函数, ...

  4. WebPack Task Runner

    https://marketplace.visualstudio.com/items?itemName=MadsKristensen.WebPackTaskRunner New to WebPack? ...

  5. pl/sql的安装使用详解

    一.  先安装  orcale10.1客户端 setup右键属性,按下图设置 net  manager 设置,不设置 pl/sql developer没办法连接 二.再安装 pl/sql develo ...

  6. elementUI分页组件封装

    在实际开发需求,产品需要的分页组件比较简单,只可以一页页地翻,就是为了防止用于直接翻看最后的数据(因为有一些历史数据数据量比较大,查看的意义不大,检索效率比较低也比较忙,因为不希望用户在翻页的时候可以 ...

  7. C#中查找或结束程序域中的主、子进程

    有时候,我们的程序需要启动一些子进程,如嵌入的图形程序. 当启动一个进程后,获得这个进程信息Process,然后其内部在某个时刻启动了一个子进程,这个时候就涉及程序域和进程树的概念.当我们通过非正常操 ...

  8. VMware 虚拟机的虚拟磁盘编程知识点扫盲之二

    目录 目录 前文列表 VDDK 安装 VDDK VixDiskLib VADP 前文列表 VMware 虚拟机的虚拟磁盘编程知识点扫盲之一 VDDK 摘自官方文档:The Virtual Disk D ...

  9. 阶段1 语言基础+高级_1-3-Java语言高级_1-常用API_1_第8节 Math类_18_数学工具类Math

    常用几个数学的方法 abs绝对值 ceil向上取整,它并不是四舍五入 floor向下取整 round四舍五入 PI 按住Ctrl+鼠标左键 进入Math这个类的源码里面 Ctrl+F12 然后输入PI ...

  10. delphi编写提取exe文件的ICO图标

    http://www.duote.com/tech/4/11797.html delphi编写提取exe文件的ICO图标 7.0分 出处:天下网吧 时间:2011-08-05 人气:2390 核心提示 ...