利用lrz 压缩图片 上传

1,502 阅读1分钟

引用:

<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;
        })