vue base64转file上传图片

最新推荐文章于 2025-03-06 15:28:15 发布

原创最新推荐文章于 2025-03-06 15:28:15 发布 · 610 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript

vue 专栏收录该内容

6 篇文章

订阅专栏

该代码段展示了如何利用html2canvas库抓取页面指定元素的截图，处理背景透明和图片跨域问题，然后将生成的数据URI转换为Blob，进一步封装成File对象并上传至OSS对象存储服务。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 	html2canvas(
        document.getElementsByClassName('center-board')[0],
        {
          backgroundColor:null,//画出来的图片有白色的边框,不要可设置背景为透明色（null）
          useCORS: true,//支持图片跨域
          scale:1,//设置放大的倍数
        }
      ).then(canvas => {
        let url = canvas.toDataURL('image/jpeg');
        let files = dataURItoBlob(url,new Date().getTime())
        var formData = new FormData();
        //blob 转 file
        let fileOfBlob = new File([files], new Date() + ".jpg"); // 命名图片名
        formData.append('file',fileOfBlob);
        formData.append('name','file');
        formData.append('type','cover');
        upload(formData)
      })



		export function dataURItoBlob(dataURI) {
		  var byteString = atob(dataURI.split(',')[1]);
		  var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
		  var ab = new ArrayBuffer(byteString.length);
		  var ia = new Uint8Array(ab);
		  for (var i = 0; i < byteString.length; i++) {
		    ia[i] = byteString.charCodeAt(i);
		  }
		  return new Blob([ab], {type: mimeString});
		}
		
		// 删除OSS对象存储
		export function upload(params) {
		  return request({
		    url: '/system/oss/upload',
		    method: 'post',
		    headers:{
		      'Content-Type':'multipart/form-data'
		    },
		    // responseType: 'blob',
		    data:params
		  })
		}

在这里插入图片描述