JS(react)图片压缩+图片上传

上传dome

                     var fileNodeTakeStock: any = createRef();<inputref={fileNodeTakeStock}onChange={showPictureTakeStock}style={{ display: "none" }}id="fileInpBtn"type="file"accept="image/*"  //限制上传格式multiple={false}capture="environment" //ios有效调用后置摄像头，use后置/><divclassName={style.upImg}onClick={() => onOpenFileChooserTakeStock()}>点击上传</div>

上传文件

  /** 触发上传 */const onOpenFileChooserTakeStock = () => {if (!!fileNodeTakeStock) fileNodeTakeStock.current.click();};/**上传图片*/const showPictureTakeStock = (e: any) => {getImg(e.target, 0.7).then(({ data, file }) => {const formData = new FormData();let data2 = dataURLtoFile(data);let fileFormat = convertBlobToFile(data2);console.log("文件大小", (file as any).size, fileFormat.size,'base64大小',getImgSize(data));//如果原图小于压缩后的就长传压缩图if (fileFormat.size < (file as any).size) {formData.append("file", fileFormat);} else {formData.append("file", file);}uploadImgFile(formData).then((res) => {if (res?.statusCode === NetState.Ok) {const newRecord = {name: res.data.FrName,filePath: res.data.FrPath,};setImgList((e) => [...e, newRecord]);} else {return Promise.reject(res?.message || "上传失败\n网络出错");}}).catch((error) => {Toast.show(error?.message || "上传失败\n网络出错");});});};/**base64字符串转为blob对象 */const dataURLtoFile = (base64: any) => {let binary = atob(base64.split(",")[1]);let array = [];for (let i = 0; i < binary.length; i++) {array.push(binary.charCodeAt(i));}return new Blob([new Uint8Array(array)], {type: "image/png",});};/**blob对象转为file对象 */const convertBlobToFile = (blob: any) => {// 创建File对象const file = new File([blob], "test.jpg", { type: blob.type });return file;};// base64图片大小const getImgSize = (base64url: any) => {//获取base64图片大小，var str = base64url.replace("data:image/jpeg;base64,", ""); //这里根据自己上传图片的格式进行相应修改var strLength: any = str.length;// base64编码方式,计算// 计算后得到的文件流大小，单位为字节//理解一下base64的编码方式，是把3个8字节编码成4个6字节，到这一步字节数是不变的//但它还要在6个字节添加两个高位组成4个8字节，base64有多少个8字节，就比原来多2倍的多少个8字节,//也就是base64长度要比原码长度多了（base64长度/8）*2个字节，换算过来就是要减掉var fileLength = parseInt((strLength - (strLength / 8) * 2).toString());// 由字节转换为Kbvar size = "";size = (fileLength / 1024).toFixed(2);return parseInt(size);};

压缩图片

getImg(imgFile,quality=0.92) {return new Promise((resolve) => {const file = imgFile.files[0];const reader = new FileReader();reader.readAsDataURL(file);reader.onload = function (e) {const image = new Image(); // 新建一个img标签（还没嵌入DOM节点)image.src = e.target.result;image.onload = function () {const canvas = document.createElement('canvas');const context = canvas.getContext('2d');const imageWidth = image.width / 2;const imageHeight = image.height / 2;canvas.width = imageWidth;canvas.height = imageHeight;context.drawImage(image, 0, 0, imageWidth, imageHeight);//'image/jpeg'：图片格式，默认为 image/png,可以是其他image/jpeg等//quality：0到1之间的取值，主要用来选定图片的质量，默认值是0.92，超出范围也会选择默认值const data = canvas.toDataURL('image/jpeg',quality);//data-压缩后base64，后面转blob对象, file-源文件resolve({ data, file });};};});
}