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. Hive安装

    一.下载:http://hive.apache.org/,选择合适的版本,Hive 1.X版本要求Hadoop2.x以上版本,Jdk1.7以上 这里选择1.2.1版本 二.安装jdk 略 三.安装Ha ...

  2. css奇特用法之 IMG添加背景图片配合显示--效果惊艳

    IMG标签本身是显示图片的,但通过CSS可以再为其设置背景图片,让其和自身的图片配合来显示,最终的效果会让你惊叹.当然,这个发现来自于老外,所以代码马上与大家分享.再此之前,我也从来没有想到过这个思路 ...

  3. Centos6.2_(64位)服务器环境配置:源码编译Nginx

    目标软件都指定安装目录:/apps.由于Nginx可以使用正则表达式来匹配访问路径, 要正常使用此功能就保证安装有Pcre库,如果你已经接着上一篇操作过来,就可以不用考虑这一点,因为此库已经在安装列表 ...

  4. java--基于socket的网络传输开发

    继http://blog.csdn.net/gaopeng0071/article/details/10959845此文章内容展开的研究. socket传输是基于tcp的网络传输协议进行的传输,tcp ...

  5. jquery完美实现textarea输入框限制字数

    <html> <head> <title> jquery完美实现textarea输入框限制字数</title> <meta http-equiv= ...

  6. 《java入门第一季》之面向对象(重头戏继承来了)

    java特性封装.继承.多态.之前对封装做了简单描述(见http://blog.csdn.net/qq_32059827/article/details/51312116),今天分析另一个特性继承性: ...

  7. UVA 11019 Matrix Matcher(二维hash + 尺取)题解

    题意:在n*m方格中找有几个x*y矩阵. 思路:二维hash,总体思路和一维差不太多,先把每行hash,变成一维的数组,再对这个一维数组hash变成二维hash.之前还在想怎么快速把一个矩阵的hash ...

  8. 【爬虫】-爬取猫眼TOP100

    原文崔庆才<python3网络爬虫实战> 本文为自学记录,如有侵权,请联系删除 目标: 熟悉正则表达式,以及爬虫流程 获取猫眼TOP100榜单 1.网站分析 目标站点为http://www ...

  9. 第二只Python爬虫

    同样参照网上教程,同时把会的不多的html标签又复习了一下 同时安利一个网站,我唯一加入过的一个社团官网(web开发协会 www.nutjs.com 前任会长是属于大牛级的存在,目前网站已多次重构,花 ...

  10. Jsp上传组件Smartupload介绍

    <form action="UploadServlet" enctype="multipart/form-data" method="post& ...