引用:
<script src="https://cdn.jsdelivr.net/npm/lrz@4.9.40/dist/lrz.all.bundle.js"></script>
参数
lrz(file, [options]);
1、file 通过 input:file 得到的文件,或者直接传入图片路径
2、[options] 这个参数允许忽略
2.1、width {Number} 图片最大不超过的宽度,默认为原图宽度,高度不设时会适应宽度。
2.2、height {Number} 同上
2.3、quality {Number} 图片压缩质量,取值 0 - 1,默认为0.7
2.4、fieldName {String} 后端接收的字段名,默认:file
返回结果
返回值是一个promise对象
then(rst)
rst.formData 后端可处理的数据
rst.file 压缩后的file对象(默认已经丢在rst.formData有一份了),需要注意的是如果压缩率太低的话,这个会是原始的file对象
rst.fileLen 生成后的图片的大小,后端可以通过此值来校验是否传输完整
rst.base64 生成后的图片base64,后端可以处理此字符串为图片,也直接用于img.src = base64
rst.base64Len 生成后的base64的大小,后端可以通过此值来校验是否传输完整 (如果采用base64上传方式)
rst.origin 也就是原始的file对象,里面存了一些原始文件的信息,例如大小,日期等。
catch(err)//错误处理
always()//返回 无论是否有错
/**
* b64 转 blob
*/
function b64ToBlob(urlData){
var arr = urlData.split(','),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n);
while(n--){
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], {type:mime});
}
lrz(fileinput)
.then(function (rst) {
// 展示处理好的图片
var img = new Image();
img.src = rst.base64;
img.onload = function () {
document.body.appendChild(img);
console.log(b64ToBlob(img.src));
//新formData
// b64ToBlob(img.src) 转为blob
var formData = new FormData();
formData.append('file', b64ToBlob(img.src), "file_tmp."+filename); // 文件对象
xhr = new XMLHttpRequest(); // XMLHttpRequest 对象
xhr.open("post", "/api/upimage/", true); //post方式,url为服务器请求地址,true 该参数规定请求是否异步处理。
// xhr.onload =uploadComplete; //请求完成
xhr.onload =function(){
if (xhr.readyState === 4 && xhr.status === 200) {
//document.getElementById(showinput).value=xhr.responseText;
alert(xhr.responseText);
}
}
xhr.send(formData);
};
return rst;
})