vue canvas转base64,canvas转blob,canvas转file文件，并上传至服务器

 1、ref获取dom

<canvas ref="canvas" :width=400"  :height="400"></canvas>
<span @click="saveImg">保存图片并上传至服务器</span>

2、获取base64编码

//保存成图片 
            saveImg(){
                const canvas = this.$refs.canvas ;
                const dataURL = canvas.toDataURL('image/png');
                //这里的dataURL是一个base64字符串，也可以直接放到img的src里面展示
                let file=this.base64ImgtoFile(dataURL) //这个是base64转file的方法
                try {
                   this.UploadFile(file)
                } catch (error) {
                    console.error('上传失败：', error);
                }
            },

3、base64转file

//base64转file
            base64ImgtoFile(dataurl, filename = 'file') {
                let arr = dataurl.split(',')
                let mime = arr[0].match(/:(.*?);/)[1]
                let suffix = mime.split('/')[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}.${suffix}`, {
                    type: mime
                })
            },

4、file文件上传至服务器

            //file上传至服务器
             UploadFile(file) { 
                let uploadkey=localStorage.getItem('uploadkey')
                let fd = new FormData();
                fd.append('file', file);//传文件
                fd.append('type', "3");//传文件
                this.$http.post('http://www.baidu.com', fd).then((res) => {
                    //data为后端返回的上传结果，里面包含文件在服务器上的地址
                    let data = eval(res)[0];
                    console.log(data)
                    
                })
            },