将选中的图片转换成文件流形式

1,899 阅读1分钟

文件上传项目中出现了两种情况,第一种用现有的比如ele里面的upload上传组件,里面可以直接获取到文件流形式,具体参考ele文档,第二种是渲染图片列表,选中其中一张上传识别信息,此时需要把图片转换成文件流形式,过程如下(先转换成base64然后转换成文件流形式)

     //选中图片转base64然后转成文件流
    getBase64ImageToFile(img,filename){
        //这个img参数是那个图片的image整个标签注意!!
        //设置解决跨域的属性
        img.setAttribute('crossOrigin', 'anonymous');
        //先转base64
        var canvas = document.createElement("canvas")
        canvas.width = img.width
        canvas.height = img.height
        var ctx = canvas.getContext("2d")
        ctx.drawImage(img, 0, 0, img.width, img.height)
        var ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase()
        var dataURL = canvas.toDataURL("image/" + ext)
        //然后转文件流
        let mine = dataURL.split(',')[0].split(':')[1].split(';')[0]
        let binary = atob(dataURL.split(',')[1])
        let array = []
        for(let i = 0;i<binary.length;i++){
            array.push(binary.charCodeAt(i))
        }
        return new File([new Uint8Array(array)],filename,{type:mine})
    },
    参考链接https://www.jianshu.com/p/a105df6b3198
    但是需要后台配合,解决跨域问题,不然实现不了。。。。。