1、使用vue-resource上传,也可以自定义ajax上传;
2、使用<input type="file" @change="submit()" name="multipart" class="element" accept="image/*" id="headerImage">标签,在submit的时候执行方法
3、正式代码 let oFiles = document.querySelector("#headerImage").files;
4、压缩图片:
modify_img_size (path, obj, callback) { //path可以是相对路径,也可以是base64位,我这里传的是bse64位
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);
//图片的质量为0.5,越小越模糊,文件也就越小
var quality = 0.5; //创建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;
} var base64 = canvas.toDataURL('image/jpeg', quality); callback(base64);
} }
5、读取二进制(base64位信息),let zipReady = new FileReader(); zipReady.readAsDataURL(oFiles[0]); 初始化读取base64,上传、预览:
let _that = this; zipReady.onload = function (e) { //初始化开始 //调用压缩方法,e.target.result为压缩结果 , {width: 1000}为压缩后宽度,resImg为压缩之后的base64位回调函数结果 _that.modify_img_size(e.target.result, {width: 1000}, function (resImg) { //转为8 位无符号整数值的类型化数组,存为图片信息,有返回值
function dataURItoBlob(dataURI) { var byteString;
if (dataURI.split(',')[0].indexOf('base64') >= 0)
byteString = atob(dataURI.split(',')[1]);
else
byteString = unescape(dataURI.split(',')[1]);
// separate out the mime component
var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
// write the bytes of the string to a typed array
var ia = new Uint8Array(byteString.length);
for (var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
} console.info(ia);
return new Blob([ia], {type:mimeString});
} //********************************************************** var blob = dataURItoBlob(resImg); //将base64做处理 let formDataImg = new FormData(); formDataImg.append('multipart', blob, oFiles[0].name);
//将从内存中读取处理之后的数据流blob插入form表单中,记得要给它取个名字,否则后端不能识别,我这里去的是原始图片的名字 formDataImg.append('accessToken', aToken); //如果查过2M则提示图片太大,返回
if (resImg.length > 2097152) { Toast(_that.$t('message.myInfo.tobig')) return true
} // 预览图片,用户选择一次不满意,要重先选择,则要删掉这个img标签,重先创建一个img
let getTempImgNode = document.getElementById('tempImg');
if (getTempImgNode) {
getTempImgNode.remove(); } HTTP.postImg('/gate/v1/userExpandInfo/updateHeadPortrait', formDataImg).then(res => { if (res.code == 0) { //上传成功之后,再次读取base64信息,创建img,生成预览
let rdader = new FileReader();
rdader.readAsDataURL(oFiles[0]); rdader.onload = function (e) { let getPicParent = document.getElementById('changePic');
let newNode = document.createElement('img');
newNode.setAttribute('id', 'tempImg');
newNode.setAttribute('src', e.target.result); getPicParent.appendChild(newNode) }; return true;
} else {
Toast(_that.$t('message.code[' + res.code + ']')); } }) }) };