使用vue进行移动端上传图
使用input[type=file]进行移动端图片上传。 html<div class="header"><img class="MeImg0" src="../assets/img/upload_pictures@2x.png" alt=""><i
·
使用input[type=file]进行移动端图片上传。
html
<div class="header">
<img class="MeImg0" src="../assets/img/upload_pictures@2x.png" alt="">
<input type="file" @change="uploadImg($event)" />
</div>
js
uploadImg(e) {
var tag = e.target;
var fileList = tag.files;
var _this = this;
var reader = new FileReader();
reader.readAsDataURL(fileList[0]);
reader.onload = function() {
var oReader = new FileReader();
oReader.onload = function(e) {
var image = new Image();
image.src = e.target.result;
image.onload = function() {
var expectWidth = this.naturalWidth;
var expectHeight = this.naturalHeight;
if (this.naturalWidth > this.naturalHeight && this.naturalWidth > 800) {
expectWidth = 800;
expectHeight = expectWidth * this.naturalHeight / this.naturalWidth;
} else if (this.naturalHeight > this.naturalWidth && this.naturalHeight > 1200) {
expectHeight = 1200;
expectWidth = expectHeight * this.naturalWidth / this.naturalHeight;
}
//canvas 绘制图片
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = expectWidth;
canvas.height = expectHeight;
ctx.drawImage(this, 0, 0, expectWidth, expectHeight);
var base64 = null;
base64 = canvas.toDataURL("image/jpeg", 0.5);
if (fileList[0].size / 2097152 > 1) {
_this.imgScale(base64, 5)
}
else {
//ajax请求,通过formdata进行上传图片
var formdata = new FormData();
var blob = _this.dataURItoBlob(base64);
formdata.append('file', blob, 'image.png');
// 这里发请求,进行图片上传
}
};
};
oReader.readAsDataURL(fileList[0]);
}
},
//缩放图片,防止图片宽高过大
imgScale(imgUrl, quality) {
var img = new Image();
var _this = this;
var canvas = document.createElement('canvas');
var cxt = canvas.getContext('2d');
img.src = imgUrl;
img.onload = function() {
//缩放后图片的宽高
var width = img.naturalWidth / quality;
var height = img.naturalHeight / quality;
canvas.width = width;
canvas.height = height;
cxt.drawImage(this, 0, 0, width, height);
//ajax请求,通过formdata进行上传图片
var formdata = new FormData();
var blob = dataURItoBlob(canvas.toDataURL('image/jpeg'));
formdata.append('file', blob, 'image.png');
// 这里发请求,进行图片上传
}
},
// 创建一个Blob对象 用于将base64转化为formdata
dataURItoBlob(base64Data) {
var byteString;
if (base64Data.split(',')[0].indexOf('base64') >= 0) {
byteString = window.atob(base64Data.split(',')[1]);
}
else {
byteString = unescape(base64Data.split(',')[1]);
}
var mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0]; //type
//处理异常,将ascii码小于0的转换为大于0
var ab = new ArrayBuffer(byteString.length); //size
var ia = new Uint8Array(ab);
for (var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
return new Blob([ab], { type: mimeString });
}
以上方法解决了图片的上传和压缩,但是在ios手机上回出现图片旋转问题。可以参考下面这一篇文章。
更多推荐
已为社区贡献12条内容
所有评论(0)