注： 基于 react 环境，请求库引入以及方法调用仅供参考

注：图片类型支持dataUrl、base64

dataUrl 封装成 blob 地址， 封装成fromdata 上传

  1. import Axios from 'Axios' // 引入请求库
  3. /**
  4. * 根据图片 URL 直接获取到 Blob
  5. **/
  6. convertImgToBlobviaCanvas(url, callback) {
  7.   const img = new Image()
  8.   img.crossOrigin = 'Anonymous' // canvas 不能处理跨域图片，如果要处理，除了服务端要开启跨域外，执行canvas操作前也要开启跨域
  9.   img.onload = function() {
  10.     let canvas = document.createElement('canvas')
  11.     const ctx = canvas.getContext('2d')
  12.     canvas.height = this.height
  13.     canvas.width = this.width
  14.     ctx.drawImage(this, 0, 0)
  15.     canvas.toBlob(callback)
  16.     canvas = null
  17.   }
  18.   img.src = url
  19. }
  21. /** 图片上传调用 */
  22. uploadImgApi(blob, callback) {
  23.   const formData = new FormData()
  24.   const url = "上传地址"
  26.   // 接口需要的参数，根据实际需要可自行修改
  27.   formData.append('uploadFile', blob)
  28.   formData.append('fileName', `${ blob.name }.png`)
  30.   Axios.post(
  31.     url, formData
  32.   ).then(res => {
  33.     console.log("上传成功， 获取返回地址")
  34.   })
  35. }
  37. // 调用方式
  38. convertImgToBlobviaCanvas(blobUrl, (blob) => {
  39.     uploadImgApi(blob)
  40. })

base64 封装成 blob地址(blob封装fromData参考上面)

  1. /** bass64转 blob */
  2. function convertBase64UrlToBlob(urlData) {
  3.   console.log('base64', urlData)
  4.   var bytes = window.atob(urlData) // 去掉url的头，并转换为byte
  5.   // 处理异常,将ascii码小于0的转换为大于0
  6.   var ab = new ArrayBuffer(bytes.length)
  7.   var ia = new Uint8Array(ab)
  8.   for (var i = 0; i < bytes.length; i++) {
  9.     ia[i] = bytes.charCodeAt(i)
  10.   }
  11.   // console.log('base转blob', URL.createObjectURL(new Blob([ab], { type: 'image/png' })))
  12.   const res = URL.createObjectURL(new Blob([ab], { type: 'image/png' }))
  13.   return res
  14. }