场景：测试传送一个图片 另一端接收保存

<input type="file" style={{display:'none'}} ref={this.refFile}/>

input上传文件，我们不设置样式，调它的 click 方法 然后我们 watch input的 change事件

current.files 这个就是文件类型了，

image-20220612150435422

它是一个类数组的对象，[0]就是文件了，那我们有这个文件对象那怎么发送给别人了？？？

我以前做过markdown上传图片但是它是走的后端，比如说图片一般就是转文件格式![image-20220612151350866.png][1]，后端处理了弄成 url 发给前端。

那我们不走后端，［０］那个类数组对象怎么来处理呢？怎么发送呢？我是这样处理的：

1.创建一个　formDate.　对象　formDate.append(‘file’,［０］文件);

image-20220612151350866

2.当我们打印的时候发现它是一个空对象我们通过 它的 get方法 里面传的是 name 我这里就是 “file”

image-20220612151537400

  1. 这时候其实可以做很多比如说缩率图 就是我们比如上传图片，将图片展示到那里。
  2. 然后我们 new File
  let FileTs = new File([files],file.name,{
            type:files.type});
   例子
  var file = new File(["foo"], "foo.txt", {
  type: "text/plain",
   [传的就是 formdata 的对象，foo.txt：名字：type：类型]
});

这时候我们得到个 File 类型

  1. 我们通过new FileReader 里面的.onload 它是回调函数我们要传 file 返回值就是base64字符串我们可以通过这些字符串来展示缩率图

  2. 我这里是传到另外一端那传过去我们怎么 base64 下载保存呢？

  3. 我刚开始直接复制 base64 通过浏览器 url 的方式能看到我的图片，我以为就直接发送过去之后我直接创个 a标签 href里面是 base64 直接 click 就行了，没想到不行 Chrome 禁止从页面打开 Data URI 网址了，这篇文章叫我迁移到后端生成。我寻思我都 .对. 了为啥还要走后端啊，解决办法

  4. 我们现在已经有了 base64 还是通过 file 对象转换的，那我们另一端直接转回来不就好了，说干就干。

  5. base 64 转 Blob

        function dataURLtoBlob(dataurl) {
        var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
            bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
        while (n--) {
            u8arr[n] = bstr.charCodeAt(n);
        }
        return new Blob([u8arr], { type: mime });
    }

    1. 通过 URL.createObjectURL() 这里面传的是 blob 对象，接收一个 url 这个时候我们就可以下载保存了

        let  blod =  dataURLtoBlob(content);
        let a =  document.createElement('a');
       let url = URL.createObjectURL(blod)
       
        a.href = url;
        a.download = blod.type;
        a.click();

我的图片已经成功从另一客户端发送与接收到了!
image-20220612151537400