关于html5: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，所以会导致上传文件名不正确的问题