乐趣区

关于html5:JS预览并上传图片

jiezi

看了之前大多数上传办法，大部分都是利用 canvas toDataURL（兼容性较好）办法，而后在转为 file 对象放到 formdata 外面，其实 canvas 还有一个办法是 toBlob，File 对象继承自 Blob 对象，也就是说 Blob 对象的属性和办法。

     function dataURLtoFile (dataurl, filename) { // 将 base64 转为 file 对象
        let arr = dataurl.split(',')
        let mime = arr[0].match(/:(.*?);/)[1]
        let bstr = atob(arr[1])
        let n = bstr.length
        let u8arr = new Uint8Array(n)
        while (n--) {u8arr[n] = bstr.charCodeAt(n)
        }
        return new File([u8arr], filename, {type: mime})
      }

解决图片的办法惯例办法利用定义好的 dataURLtoFile 办法 

function handleImg (file) {
     // 借助 filereader 实现图片预览
        let read = new FileReader()
        read.readAsDataURL(file)
        return new Promise(function (resolve, reject) {read.onload = function (e) {let img = new Image()
            img.src = e.target.result
            img.onload = function () {
              // 创立 canvas
              let canvas = document.createElement('canvas')
              let ctx = canvas.getContext('2d')
              canvas.width = this.width
              canvas.height = this.height
              ctx.drawImage(this, 0, 0, this.width, this.height)
              // 从这里开始有差异
              // 计划一 比拟常见的办法
              let base64 = canvas.toDataURL(file['type'], 1)
              let files = dataURLtoFile(base64, file.name)
              resolve(files)
              // 计划二 间接利用 blob
              canvas.toBlob(function(blob) {blob.lastModifiedDate = new Date().getTime();
                blob.name = file.name
                resolve(blob)
              },file['type'], 1)
            }
          }})
     }

最初当咱们上传的时候调用 handleImg 办法就能够返回解决好的 img 了 

async function upload() {let formData = new FormData()
 let _file = await handleImg('我是须要上传的 img')
 formData.append('file[]', _file, _file.name)
 // 调用上传接口
}

最初调用接口间接上传就好了，这里就是上传的时候，应用计划二肯定要增加_file.name 这个参数，因为上传过程中浏览器给咱们的文件流主动命名为了 blob，所以会导致上传文件名不正确的问题

退出移动版