input上传图片并压缩（vue，前端，js）

andot 发布于2019-08-26 10:59 / 1579人阅读

摘要：大家好，我是云皓，话不多说，直入正题，获取上传文件自行获取，也可通过的组件来获取，转化为文件，压缩，转换为文件，上传。

大家好，我是云皓，话不多说，直入正题

1，获取input上传file文件（自行获取，也可通过vant的upload组件来获取）
2，转化为base64文件
3，压缩
4，转换为blob文件
5，上传。
下面直接上代码（本代码段是用用在vue&vantui 里面，原理都在，可根据自己的需求来相应的修改）

/**
  * 上传文件
  */
uploadImg (blob, base64) {
      //   接收到回调函数  获取到压缩后  图片文件，然后上传就可以了
      const formData = new FormData()
    
      // 需要给文件名添加后缀扩展名，否则传到后端的是一个没有扩展名的文件
      formData.append("file", blob, ".jpg")
      formData.append("filename", blob + ".jpg")

       //此处我自己封装的api接口，大家可以无视，就是上传提交的意思
      api.uploadImg(formData)
        .then(res => {
          console.log(res)
        })
},
/**
  * 获取到的二进制文件 转 base64文件
  * @param blob
  */
blobToBase64 (blob) {
  const self = this // 绑定this
  const reader = new FileReader() //实例化一个reader文件
  reader.readAsDataURL(blob) // 添加二进制文件
  reader.onload = function (event) {
    const base64 = event.target.result // 获取到它的base64文件
    const scale = 0.99  // 设置缩放比例 （0-1） 
    self.compressImg(base64, scale, self.uploadImg) // 调用压缩方法
  }
},
/**
  * 压缩图片方法
  * @param base64  ----baser64文件
  * @param scale ----压缩比例 画面质量0-9，数字越小文件越小画质越差
  * @param callback ---回调函数
  */
compressImg (base64, scale, callback) {
  console.log(`执行缩放程序，scale=${scale}`)
  
  // 处理缩放，转换格式
  // 下面的注释就不写了，就是new 一个图片，用canvas来压缩
  const img = new Image()
  img.src = base64
  img.onload = function () {
    const canvas = document.createElement("canvas")
    const ctx = canvas.getContext("2d")
    canvas.setAttribute("width", this.width)
    canvas.setAttribute("height", this.height)
    ctx.clearRect(0, 0, canvas.width, canvas.height)
    ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
    // 转成base64 文件
    let base64 = canvas.toDataURL("image/jpeg")
    // 根据自己需求填写大小 我的目标是小于3兆
    while (base64.length > 1024 * 1024 * 3) {
      scale -= 0.01
      base64 = canvas.toDataURL("image/jpeg", scale)
    }
    // baser64 TO blob 这一块如果不懂可以自行百度，我就不加注释了
    const arr = base64.split(",")
    const mime = arr[0].match(/:(.*?);/)[1]
    const bytes = atob(arr[1])
    const bytesLength = bytes.length
    const u8arr = new Uint8Array(bytesLength)
    for (let i = 0; i < bytes.length; i++) {
      u8arr[i] = bytes.charCodeAt(i)
    }
    const blob = new Blob([u8arr], { type: mime })
    // 回调函数 根据需求返回二进制数据或者base64数据，我的项目都给返回了
    callback(blob, base64)
  }
}

图片压缩是我经常用的，所以自己存储了这个代码块，方便下次复用，同时也分享给大家，如有疑问或者错误，可在下方留言，谢谢大家支持

云服务器 GPU云服务器 js图片压缩上传 js压缩图片上传 js上传图片压缩插件 php保存图片并压缩

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/106939.html

vue下实现input实现图片上传，压缩，拼接以及旋转

摘要：背景作为一名前端工作人员，相信大家在开发系统的时候，经常有遇到需要这么一种需求，就是需要为用户保存上传的图片，很多小白遇到这个问题的时候，都会虎躯一震，以为会是一个棘手的问题，当你读完这篇文章的时候，你会发现都是你瞎操作了，真相就是这么简单背景作为一名前端工作人员，相信大家在开发系统的时候，经常有遇到需要这么一种需求，就是需要为用户保存上传的图片，很多小白遇到这个问题的时候，都会虎...

megatron 2019-08-23 13:40 评论0 收藏0
vue下实现input实现图片上传，压缩，拼接以及旋转

摘要：背景作为一名前端工作人员，相信大家在开发系统的时候，经常有遇到需要这么一种需求，就是需要为用户保存上传的图片，很多小白遇到这个问题的时候，都会虎躯一震，以为会是一个棘手的问题，当你读完这篇文章的时候，你会发现都是你瞎操作了，真相就是这么简单背景作为一名前端工作人员，相信大家在开发系统的时候，经常有遇到需要这么一种需求，就是需要为用户保存上传的图片，很多小白遇到这个问题的时候，都会虎...

Invoker 2019-08-02 12:05 评论0 收藏0
vue下实现input实现图片上传，压缩，拼接以及旋转

摘要：背景作为一名前端工作人员，相信大家在开发系统的时候，经常有遇到需要这么一种需求，就是需要为用户保存上传的图片，很多小白遇到这个问题的时候，都会虎躯一震，以为会是一个棘手的问题，当你读完这篇文章的时候，你会发现都是你瞎操作了，真相就是这么简单背景作为一名前端工作人员，相信大家在开发系统的时候，经常有遇到需要这么一种需求，就是需要为用户保存上传的图片，很多小白遇到这个问题的时候，都会虎...

ChristmasBoy 2019-08-29 17:22 评论0 收藏0
在Vue项目中使用WebUploader实现文件上传

摘要：简介是由团队开发的一个简单的以为主，为辅的现代文件上传组件。采用大文件分片并发上传，极大的提高了文件上传效率。另外分片传输能够更加实时的跟踪上传进度。选择文件的按钮。简介：WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主，FLASH为辅的现代文件上传组件。在现代的浏览器里面能充分发挥HTML5的优势，同时又不摒弃主流IE浏览器，沿用原来的...

endiat 2019-08-26 10:14 评论0 收藏0