js JavaScript 文件相關 input上傳 的各種轉換操作

 0 、createObjectURL  參數可以是  blob對象 或 file對象

 1、file  ---> base64  或 string

*   文件對象  讀取成json

*   文件對象，如圖片---->base64

 

2、base64 或 string ---> blob

 

3、  指定url或blob文件對象瀏覽器下載文件

 

 

 

 

import { getBase64, dataURLtoBlobs, blobToFile } from '@/utils/util.js'

一、文件對象 ---> 讀取成json

    geJsonData (file) {
      const __this = this
      var reader = new FileReader()// 新建一個FileReader
      reader.readAsText(file, 'UTF-8')// 讀取文件
      reader.onload = function (evt) { // 讀取完文件之后會回來這里
        var fileString = evt.target.result // 讀取文件內容
        const jsonObj = JSON.parse(fileString)
        __this.actData[file.name] = jsonObj.animations
      }
    },

 

文件對象，如圖片---->base64

// util.js

export function getBase64 (img, callback) {
  console.log('getBase64', img)
  const reader = new FileReader()
  reader.addEventListener('load', (e) => {
    callback(reader.result)
  })
  reader.readAsDataURL(img)
}


handleChange (info) {
    // 得到blob格式數據 上傳
    getBase64(item.originFileObj, (result) => {
            __this.fileBlobObj[item.name] = dataURLtoBlobs(result)
            __this.postImage(item)
     })

}

 二、

base64 ----->-----> Uint8Array  --> blob

// 將base64 =  dataurl  轉換為blob
export function dataURLtoBlobs (dataurl) {
  var arr = dataurl.split(',')
  var mime = arr[0].match(/:(.*?);/)[1]
  var bstr = atob(arr[1])
  var n = bstr.length
  var u8arr = new Uint8Array(n)
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n)
  }
  return new Blob([u8arr], { type: mime })
}

 

 str--->blob

    jsonToAtlasStr (json) {
      let str = '\n'
      str += json.filename + '\n'
      str += 'size: ' + json.png_size.width + ',' + json.png_size.height + '\n'
      str += 'format: ' + json.format + '\n'
      str += 'filter: ' + json.filter.join(',') + '\n'
      str += 'repeat: ' + json.repeat + '\n'

      for (const x in json.blocks) {
        str += json.blocks[x].name + '\n'
        str += '  rotate: ' + (json.blocks[x].rotate ? 'true' : 'false') + '\n'
        str += '  xy: ' + json.blocks[x].xy.x + ', ' + json.blocks[x].xy.y + '\n'
        str += '  size: ' + json.blocks[x].size.width + ', ' + json.blocks[x].size.height + '\n'
        str += '  orig: ' + json.blocks[x].origin_size.width + ', ' + json.blocks[x].origin_size.height + '\n'
        str += '  offset: ' + json.blocks[x].offset.x + ', ' + json.blocks[x].offset.y + '\n'
        str += '  index: ' + json.blocks[x].index + '\n'
      }

      return str
    },

 

 

 

 三、指定url或blob文件對象瀏覽器下載文件

 // url = blob  或 原始的遠程url
function openDownloadDialog (url, saveName) {
  if (typeof url === 'object' && url instanceof Blob) {
      url = URL.createObjectURL(url)
    }
    var aLink = document.createElement('a')
    aLink.href = url
    aLink.download = saveName || ''
    var event
    if (window.MouseEvent) event = new MouseEvent('click')
    else {
      event = document.createEvent('MouseEvents')
      event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null)
    }
    aLink.dispatchEvent(event)
  }

  openDownloadDialog(blobObj, xmlName + '.xlsx')

 

   this.exportRaw('fan.atlas', fileStr)

 fakeClick (obj) {
      var ev = document.createEvent('MouseEvents')
      ev.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null)
      obj.dispatchEvent(ev)
    },

    exportRaw (name, data) {
      var urlObject = window.URL || window.webkitURL || window
      var export_blob = new Blob([data])
      var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a')
      save_link.href = urlObject.createObjectURL(export_blob)
      save_link.download = name
      this.fakeClick(save_link)
    },

 

 

dataurl