<input type="file" accept="image/*" style="display: none;" @change="change" id="file">
<div class="setting-head" @click="selectImage">
<p><img :src="headimg" alt=""></p>
<p>更换头像</p>
</div>
这个是util.js
/** 图片压缩 返回base64 */
dealImage(path, obj, callback){
var img = new Image();
img.src = path;
img.onload = function(){
var that = this;
// 默认按比例压缩
var w = that.width,
h = that.height,
scale = w / h;
w = obj.width || w;
h = obj.height || (w / scale);
var quality = 0.8; // 默认图片质量为0.9
//生成canvas
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
// 创建属性节点
var anw = document.createAttribute("width");
anw.nodeValue = w;
var 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值越小,所绘制出的图像越模糊
var base64 = canvas.toDataURL('image/jpeg', quality );
// 回调函数返回base64的值
callback(base64);
}
},
/** base64转file
* filename图片的名字,dataurl是base64地址
*/
dataURLtoFile(dataurl, filename) {
var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while(n--){
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], filename, {type:mime});
}
//选择图片上传
selectImage(){
var u = navigator.userAgent;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1;
var browser = navigator.userAgent.toLowerCase();
if (isAndroid && browser.indexOf(' qq') != -1 && browser.indexOf('mqqbrowser') != -1) { $("#file").attr('capture','camera');}
document.getElementById('file').click();
},
//图片上传压缩处理
change(e){
var that = this;
let file = e.target.files[0];
let reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e) {
that.util.dealImage(this.result, {width: 1024,height:1024}, function (base) {
var filet = that.util.dataURLtoFile(base,file.name);
that.upload(filet);
});
}
},
//上传图片
async upload(file){
var that = this
let fileinfo = [];
fileinfo.push({name:file.name, size:500, filePath:file.tempFilePath});
const json = await this.http.request(this.api.u('getOssPolicy'),'post',{id:this.id,fileType:'userPortrait',originalFileInfoArr:JSON.stringify(fileinfo)},false);
if(json.data.returnCode==0){
var AuthMsg = json.data.result
var imgExit = file.name.split('.')[1];
var ossKey = AuthMsg.dir + AuthMsg.uploadNameList[0] + '.'+imgExit;
var imgurl = AuthMsg.host + '/' + ossKey;
this.$vux.loading.show({text:'上传中...'});
// 添加签名信息
var ossData = new FormData();
ossData.append('OSSAccessKeyId', AuthMsg.accessKeyId);
ossData.append('policy', AuthMsg.policy);
ossData.append('Signature', AuthMsg.postSignature);
ossData.append('key',ossKey);
ossData.append('callback', AuthMsg.callback);
// 添加文件
ossData.append('file', file, AuthMsg.uploadNameList[0]);
ossData.append('success_action_status', 200);
$.ajax({
url: AuthMsg.host,
data: ossData,
processData: false,
contentType: false,
type:'POST',
success:function (data) {
that.headimg = that.util.thumbImg(imgurl,'h3');
that.form.portrait = imgurl;
that.$vux.loading.hide();
},
error:function(err){
that.$vux.toast.text(err);
that.$vux.loading.hide();
}
})
}else{
this.$refs.login.checkLogin(json.data);
}
},