创建js文件,命名为uploadImg.js
1、封装好压缩图片
import Vue from 'vue';
//上传图片 自动压缩处理
//传入参数
//action:接口地址
//param:input获取的input File
//path:可选,图片上传目录需要后端配合
//reWidth,reHeight 压缩设置最大宽高
export function uploadImg(action,param,path,reWidth,reHeight){
return new Promise((resolve, reject) => {
var imgname = param.name;
var imgtype = param.type;
console.log(imgtype.split('/')[1])
let reader = new FileReader();
reader.readAsDataURL(param);
reader.onloadend = function() {
let base64 = reader.result; // base64就是图片的转换的结果
//开始压缩图片
var Img = new Image();
Img.src = base64; //赋值
Img.onload = function(){
var set_head = '';
let w = this.naturalWidth,
h = this.naturalHeight,
resizeW = 0,
resizeH = 0;
//压缩设置
let maxSize = {
width:reWidth, //设置选项 宽度
height:reHeight, // 设置选项 高度
level:0.9 //图片保存质量
};
//计算压缩比例
if(w > maxSize.width || h > maxSize.height){
let multiple = Math.max(w / maxSize.width , h / maxSize.height);
resizeW = w / multiple;
resizeH = h / multiple;
}else{
resizeW = w;
resizeH = h;
}
let canvas = document.createElement("canvas"),
ctx = canvas.getContext('2d');
if(window.navigator.userAgent.indexOf('iphone') > 0){
canvas.width = resizeH;
canvas.height = resizeW;
ctx.retate(90 * Math.PI / 180);
ctx.drawImage(Img,0,-resizeH,resizeW,resizeH);
}else{
canvas.width = resizeW;
canvas.height = resizeH;
ctx.drawImage(Img,0,0,resizeW,resizeH);
}
set_head = canvas.toDataURL(imgtype,maxSize.level); //得到压缩完成的base64图片
var arr = set_head.split(','), mime = arr[0].match(/:(.*?);/)[1],bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while(n--){
u8arr[n] = bstr.charCodeAt(n);
}
var NewName = '123.'+imgtype.split('/')[1];
var resize64 = new File([u8arr], NewName, {type:mime}); //得到formData
var Newparam = new FormData();
var names = imgname;
Newparam.append('imgFile', resize64, resize64.set_head);
Newparam.append('message', names);
Newparam.append('uploadPath', path);
let config = {headers: {'Content-Type': 'multipart/form-data'}};
Vue.prototype.$axios.post(action, Newparam, config).then(function(res) {
if(res.data.invokeResultCode == 200){
Vue.prototype.$message.success("上传成功");
resolve(res.data.data.imgUrl) //如果上传成功返回图片地址 需要后端配合
}
else{
Vue.prototype.$message.error(res.data.invokeResultMessage);
reject('error');//如果错误返回错误
}
}).catch((res) => {
Vue.prototype.$message.error('上传图片失败,请稍候重试或联系管理员');
reject('error'); //如果错误返回错误
})
};
}
});
};
2、页面中引入方法
import {uploadImg}from '../../utils/uploadimg.js';
3、data中需要的定义
action:'',
param:'',
coinIconUrl:'',
4、在需要的地方引入方法(此处为ElementUI封装上传,拦截上传前,上传)
beforeupload(file) { //拦截图片上传
//判断图片是否符合规则,此处只能返回true 或者false
this.param = file;
const isJPG = file.type === 'image/png';
const isLt2M = file.size / 1024 / 1024 < 1;
if (!isJPG) {this.$message.error('上传图片只能是 PNG 格式!');}
else if (!isLt2M) {this.$message.error('上传图片大小不能超过 1MB!');}
return isJPG && isLt2M;
},
httprequest() { //请求上传
var path = 'coin';
//本文核心代码
uploadImg(this.action,this.param,path,200,200).then(res => {
console.log(res);
this.coinIconUrl = res;
},error => {console.log(error);});
//本文核心代码结束
},