参照博客: https://blog.csdn.net/qq_34794264/article/details/80278243
这位博主详细的介绍了localResizeIMG插件的安装, 引用, 使用, 参数, 返回值. 十分受用.
参照博客: https://www.cnblogs.com/manongxiaobing/p/4720568.html
这位博主有指出插件的不足之处, 还有个修复插件
<input
accept="image/*"
type="file"
name="avatar"
id="avatar"
@change="upload($event,'orderImages')"
>
// 图片上传
upload(e, image) {
this.formData = new window.FormData();
let file = e.target.files[0];
// console.log("file", file, "e", e);
// 没有图片, 返回
if (!file) {
return;
}
// 仅支持png/jpf/jpeg/bmp类型图片
let type = file.type;
if (
!(
type == "image/png" ||
type == "image/jpg" ||
type == "image/jpeg" ||
type == "image/bmp"
)
) {
// this.updis = true;
return (
this.$vux.toast.text(
`图片格式不对,请上传JPEG/JPG/BMP/PNG格式图片`,
"middle"
),
(e.target.value = "")
);
}
// 使用神奇插件, lrz就是它提供的方法
lrz(file, {width: 4096, height: 4096, quality: 0.5, filedName: 'file'})
.then((rst) => {
// console.log('成功时', rst);
// 判断大小 (base64编码urlencode后大小不超过4M)
let size = rst.fileLen / 1024 / 1024;
if (size > 4) {
// this.updis = true;
return (
this.$vux.toast.text(`图片太大,请上传小于4M的图片`, "middle"),
(e.target.value = "")
);
}
// 获取上传的文件的宽高 (最短边至少15px,最长边最大4096px) ⇒ 同一部社保拍摄的图片, 宽高一样. 在此贴出, 是作为一个获取图片宽高的方法展示
// let imgobj = new Image();
// imgobj.src = rst.base64;
// console.log('imgobj');
// console.dir(imgobj);
// imgobj.onload = () => {
// console.log(imgobj.height);
// console.log(imgobj.width);
// if (imgobj.height < 15 || imgobj.width < 15) {
// this.$vux.toast.text("最短边至少15px", "middle");
// return;
// }
// if (imgobj.height > 4096 || imgobj.width > 4096) {
// this.$vux.toast.text("最长边最大4096px", "middle");
// return;
// }
// };
// 给用户看看图片
let imgobj = new Image();
imgobj.src = rst.base64;
// 图片校验完毕, 收集参数
rst.formData.append("flag ", "front");
this.$http
.post("api/idCard", rst.formData)
.then(({ data }) => {
// console.log(data);
let _this = this;
if (data.code == "200") {
} else {
this.$vux.alert.show({
content: "识别失败, 请重新识别"
});
return e.target.value = '';
}
});
// return rst.formData;
})
.catch(function(error){
// console.log('失败时', error);
this.$vux.toast.text(`图片上传失败,${data.msg}`, "middle");
this[image].pop();
e.target.value = "";
})
.always(function(){
// console.log('都会执行');
})
},