附件上传与压缩

最新推荐文章于 2023-04-06 14:30:58 发布

广东话的蛇皇

最新推荐文章于 2023-04-06 14:30:58 发布

阅读量214

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_43618136/article/details/112705594

版权

前端专栏收录该内容

352 篇文章 1 订阅

订阅专栏

该代码段展示了如何在JavaScript中将Base64编码转换为Blob对象，进一步将Blob转换为File，并实现图片压缩。它包括了从Base64解码、创建Blob、转换为File以及使用FormData进行上传的过程，适用于前端文件上传场景。

摘要由CSDN通过智能技术生成

/**
 * base64转blob
 * @param {*} base64对象
 */
export function dataUrlToBlob(dataUrl) {
  let mimeString = dataUrl
    .split(',')[0]
    .split(':')[1]
    .split(';')[0] // mime类型
  let byteString = atob(dataUrl.split(',')[1]) //base64 解码
  let arrayBuffer = new ArrayBuffer(byteString.length) //创建缓冲数组
  let intArray = new Uint8Array(arrayBuffer) //创建视图

  for (let i = 0; i < byteString.length; i++) {
    intArray[i] = byteString.charCodeAt(i)
  }
  return new Blob([intArray], { type: mimeString })
}
/**
 * blob转base64
 * @param {*} blob blob对象  callback 回调函数
 */
export function blobToDataURI(blob, callback) {
  var reader = new FileReader()
  reader.onload = function(e) {
    callback(e.target.result)
  }
  reader.readAsDataURL(blob)
}
/**
 * blob转file
 * @param {*} theBlob blob对象  fileName 文件名
 */
export function blobToFile(theBlob, fileName) {
  let file = new File([theBlob], fileName, {
    lastModified: new Date()
  })
  return file
}
/**
 * 图片压缩
 * @param  image 原始图片 ratio 压缩比(0-1)
 * @return  返回一个base64编码的数据
 */
export function compress(image, ratio = 0.3) {
  let canvas = document.createElement('canvas')
  let ctx = canvas.getContext('2d')
  // let initSize = image.src.length
  let { width } = image
  let { height } = image
  canvas.width = width
  canvas.height = height
  ctx.fillRect(0, 0, canvas.width, canvas.height)
  ctx.drawImage(image, 0, 0, width, height)

  // 进行最小压缩0.1
  let compressData = canvas.toDataURL('image/jpeg', ratio)
  return compressData
}

    imgMsg(data){
      if(data.code == 2) {
        let base64Data,blobData,imgFile
        let imgFormData = new FormData()
        let image = new Image()
        image.src = URL.createObjectURL(data.msg[0])
        let that = this
        image.onload = function () {
          base64Data = compress(image) // 压缩并获取到base64数据
          blobData = dataUrlToBlob(base64Data)
          imgFile = blobToFile(blobData, 'image')
          imgFormData.append('file', imgFile)
          that.openFullScreen()
          axios.post(process.env.VUE_APP_URL +"/waterOperation/app/apptbfileinfo/upload", imgFormData , {timeout: 1000000}).then(result => {
            if (result.status === 200) {
                var item = {}
                item.comment = result.data.data.path
                item.createTime = result.data.data.createTime
                item.fileInfoId = result.data.data.id
                item.safetyCheckId = that.itemId
                item.link = that.imgLink
                item.type = that.imgFixType
                if (that.typeId != 1) {
                  that.imgReceipt.push(item)
                } else {
                  item.id = null
                  that.fixTableData[that.imgFixIndex].fileList.push(item)
                }
              console.log("附件数据上传成功")
              that.closeFullScreen()
            } else {
              console.log("附件数据上传失败")
            }
          })
        }
      }
    }