前端上传图片并初步压缩图片

小鱼儿 2021-12-15 08:17 480阅读 0赞

# 上传图片和压缩 #

### 前端处理用户图片, 控制上传图片的大小, 减轻服务器流量压力 ###

*  首先通过input获取图片

*  获取所有图片数据并添加到一个数组中

let file = e.target.files
        let arr = []
         for (let i = 0; i < file.length; i ++) { 
           arr.push(file[i])
         }

*  通过遍历判断图片原始文件的大小(这里大小是字节), 来选择是否压缩
 *  图片压缩功能实现有很多方法, 我在这里用的是lrz的压缩插件
 *  下载插件 :

npm i lrz -S

lrz( value , options).then(function(rst){ ...})

其中 **value** : 图片file数据  
**options** : 是lrz插件的设置, 可以再里面设置 **quality** (压缩比例)  
**rst** : 是插件返回的一个对象, 其中包括 压缩后的 base64格式

`因为后台不接收base64格式的图片文件,所以下面进行了格式转换`

var blob = this.dataURLtoBlob(rst.base64)
    	var newfile = this.blobToFile(blob, name)
    	// newfile 就是最后转换好的格式了

*  下面是完整的代码, 希望能给大家提供帮助

// 上传图片处理
        changeImage (e) { 
          let file = e.target.files
          let arr = []
          for (let i = 0; i < file.length; i ++) { 
            arr.push(file[i])
          }
          // console.log(file)
          var options = { 
            quality: 0.1
          }
          arr.forEach(function(value,j){ 
            // this.imgList[i].img = window.URL.createObjectURL(file[i])
            if (file.size > 1000000) { 
              lrz( value , options).then(function(rst) { 
                //成功时执行
                var blob = this.dataURLtoBlob(rst.base64)
                var newfile = this.blobToFile(blob, name)
                this.imgList.push ({ 
                  img: newfile,
                  img64: rst.base64,
                  index: this.imgLength
                } )
                this.imgLength ++
              }.bind(this)).catch(function(error) { 
                //失败时执行
                console.log('失败', error)
              }).always(function() { 
                //不管成功或失败，都会执行
              })
            } else { 
              console.log(1)
              this.imgList.push ({ 
                img: value,
                img64: URL.createObjectURL(value),
                index: this.imgLength
              } )
              this.imgLength ++
            }
            
          }.bind(this))
          
        },
        //将base64转换为blob
        dataURLtoBlob(dataurl) { 
          var arr = dataurl.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 });
        },
        //将blob转换为file
        blobToFile(theBlob, fileName) { 
          theBlob.lastModifiedDate = new Date()
          theBlob.name = fileName;
          return theBlob;
        },
      },