JS预览并上传图片

看了之前大多数上传方法，大部分都是利用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，所以会导致上传文件名不正确的问题