HTML:
<input type="file" name="image" class="img" accept="image/*" @change='onUpload'>
JS:
// 上传图片
onUpload: function (e) {
var that = this;
let file = e.target.files[0];
if (!/image\/\w+/.test(file.type)) {
alert("请选择图片");
return false;
}
var load;
load = $.loading({
content: '上传中...',
})
// 通过canvas压缩图片
var reader = new FileReader();
reader.readAsDataURL(file);
var img = new Image;
reader.onload = function (e) {
var width = 1080, //图像大小
quality = 0.8, //图像质量
canvas = document.createElement("canvas"),
drawer = canvas.getContext("2d");
img.src = this.result;
img.onload = function () {
canvas.width = width;
canvas.height = width * (img.height / img.width);
drawer.drawImage(img, 0, 0, canvas.width, canvas.height);
img.src = canvas.toDataURL("image/png", quality);
}
}
setTimeout(function () {
// 创建form对象
let param = new FormData();
// 通过append向form对象添加数据
param.append('img', file);
// 文件大小
param.append('size', file.size);
for (var n in that.params) {
param.append(n, that.params[n]);
}
// 创建ajax
var xhr = new XMLHttpRequest();
xhr.onload = function () {
var d = JSON.parse(xhr.responseText);
if (d.code == '0') {
load.loading("hide");
that.upImgList.push({ url: img.src, id: d.data.file_ids[0] })
}
}
xhr.open("POST", "http://192.168.1.39:27803/Common_Upload/uploadImg", true);
// 发送表单数据
xhr.send(param);
}, 1000);
},
// base64转文件
dataURItoBlob: function (dataURI) {
var byteString = atob(dataURI.split(',')[1]);
var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
var ab = new ArrayBuffer(byteString.length);
var ia = new Uint8Array(ab);
for (var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
return new Blob([ab], { type: mimeString });
},