需求：我需要把移动端的一个base64图片传到PC端后，由PC端上传第三方接口，得到第三方接口返回的一个合成文件。
下面是我历经千辛万苦后得到的流程结果，我会按照下面如图顺序介绍每一个步骤
编辑
我好苦呀编辑
下面开始介绍：
一.获取base64
这里实际是获取电子签名的base64，总之就是拿到一个base64
二.转文件流上传图片
里面的上传图片实际是调用接口，fd已经是可直接上传的formData了
更详细可看：base64转formdata上传图片_shihezhengshz的博客-CSDN博客
// base64转formdata
base64ToFormdata(base64Data){
const data = window.atob(base64Data.split(',')[1]);
const ia = new Uint8Array(data.length);
for (let i = 0; i < data.length; i++) {
ia[i] = data.charCodeAt(i);
}
const blob = new Blob([ia], { type: 'image/png' });
const fd = new FormData();
fd.append('multipartFile', blob, new Date().getTime() + '.png');
// 上传图片
this.upload(fd)
}
三.获取文件地址
我调用后端上传文件接口后，后端会返回给我一个存到服务器里的文件地址
四.传文件地址
此处有：注意点B
这个就是使用webSocket将信息，从移动端传到PC端，这里webSocket实际上就是聊天室思想，即A链接传信息给B链接。
五.文件地址获取图片转base64
此处有：注意点C
// 获取到一个canvas的url叭
getBase64Image(img) {
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);
return dataURL;
},
// 图片地址转为base64
imgUrlTransformationForBase64(imgUrl){
var image = new Image();
image.width = 200;
image.height = 200;
// 设置跨域
image.setAttribute("crossOrigin",'Anonymous')
// 服务器地址
image.src = "http://192.168.0.18:7012"+imgUrl;
image.onload = () => {
this.base64 = this.getBase64Image(image);
}
return this.base64
},
原文链接：
www.jb51.net/article/132…https://www.jb51.net/article/132697.htm
下面是我在实现这套流程时遇到的问题，以下包含---问题+心路历程（可跳过）+解决方案：
A注意点：《webSocket：兄弟，你这个base64，有亿点点长鸭》
心路历程： 刚开始遇到问题，是因为webSocket “不稳定”，也就是传输数据的时候经常会断开连接，但偶尔又能成功，因为这时候是我第二次写webSocket，也没想到解决方案，百度了好一会儿，才知道webSocket还有Code码！哇！
解决方案： webSocket报code1009，即数据量过大，也就是你的base64太长了，传不了，这就衍生了我使用地址传输的方案，也就有了下一个问题。
编辑
原文链接： segmentfault.com/a/119000001…https://segmentfault.com/a/1190000014582485
B注意点：《webSocket：“听说，你传了个地址？”》
心路历程： 传地址……传地址……明明挺快乐的事儿，结果期待着，好长时间收不到webSocket的消息，一看，好家伙，链接又断了，一看code，1002emmmm上网一查，自己一想，喔~是链接里面的 / 出问题了。
解决方案： string.split('/').join('-')，之后传过去再 string.split('-').join('/')转回来，其中string就是地址了
编辑
C注意点： 《Canvas：谁污染了我，我又污染了谁？》
心路历程：一张图，足矣。
编辑
解决方案： 设置跨域
var image = new Image();
// 设置跨域
image.setAttribute("crossOrigin",'Anonymous')
\
