input上傳圖片并壓縮（vue，前端，js）

andot 發布于2019-08-26 10:59 / 1576人閱讀

摘要：大家好，我是云皓，話不多說，直入正題，獲取上傳文件自行獲取，也可通過的組件來獲取，轉化為文件，壓縮，轉換為文件，上傳。

大家好，我是云皓，話不多說，直入正題

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保存圖片并壓縮

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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瀏覽器，沿用原來的...

mindwind 2019-08-02 15:35 評論0 收藏0