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. spring,配置文件applictionContext.xml,Mybatis mybatis.xml,springMVC spring整合springMVC mybatis

  2. 如何在Web页面里使用高拍仪扫描上传图像

    如何在Web页面里使用高拍仪扫描上传图像 市场上所有的高拍仪都支持扫描图片并保存到本地,一般公司都会提供控件.开发人员只需要在页面集成就可以进行拍照和扫描.只不过一般扫描的图片是保存在本地固定的文件夹 ...

  3. BP算法演示

    本文转载自https://mattmazur.com/2015/03/17/a-step-by-step-backpropagation-example/ Background Backpropaga ...

  4. <知识整理>2019清北学堂提高储备D2

    简单数据结构: 一.二叉搜索树 1.前置技能: n/1+n/2+……+n/n=O(n log n)  (本天复杂度常涉及) 2.入门题引入: N<=100000. 这里多了一个删除的操作,因此要 ...

  5. spring boot 集成 mybatis 单元测试Dao层 控制台报错:org.apache.ibatis.binding.BindingException: Invalid bound statement (not found):

    最近帮同学做毕业程序,采用后端spring boot + mybatis + H2,将框架搭好进行各层的单元测试时,在dao层就出现了错,如图 于是在网上找各种资料,有的说是xml文件和接口没有一一对 ...

  6. CG-CTF | 上传绕过

    最近一直在做算法题,头都要大了,今天悄咪咪来一个web换换脑子,一发flag敲开♥[虽然知道这是个水题ε=ε=ε=┏(゜ロ゜;)┛]

  7. Mac sublime安装package controller

    https://packagecontrol.io/installation#st2  链接被墙了这个. 我拿来放在这里. The simplest method of installation is ...

  8. 图解SQLSERVER联合查询和连接查询的区别

      相信很多人都会用SQLSERVER联合查询和连接查询,但是用起来不一定都得心应手,对于其中的原理可能就模糊不清了,要想很牢固地掌握和运用SQL联合查询和连接查询机制,必须对其根本原理有很清晰认识, ...

  9. C/C++判断字符串是否包含某个子字符串

    C风格 #include <iostream> #include <string> #include <cstring> using namespace std; ...

  10. 阶段1 语言基础+高级_1-3-Java语言高级_1-常用API_1_第1节 Scanner类_3-Scanner的使用步骤

    Scanner如何进行键盘输入,引用类型就包含了Scanner,它就是引用类型,所以也有这三个步骤, 导包.创建.使用 先通过api文档找到它.左边输入要查找scanner.双夹scanner右边就会 ...