构造的File对象,内容不正确, 最明显的就是文件大小只有几个字节

wangyuanqi
  • 120
评论
阅读 601
3 个回答

File构造函数第一个参数我记得好像是Blob片段或者ArrayBuffer片段的数组吧。。如果传的是字符串,js虽然使用的是UTF16,但是好像依旧会转成是UTF8编码的字符二进制数据。

返回的这个File实例,实际上,只是内存里的一段缓存数据,前端浏览器好像也没有写硬盘的权限,缓存不下来。

你想通过url来加载文件,本地的话,只能通过input来让用户手动选择文件,js是没有权限直接去指定本地url取东西的。
远端文件,就通过XMLHttpRequest或者fetch api这种原生api或者其他ajax库去请求回来就行,指定返回类型是blob,你就直接可以取到Blob。然后你可以把Blob转成File。

这些ArrayBuffer,Blob,File本质上,都可以理解为,指代实际文件的对象。
区别就是,ArrayBuffer转成TypedArray用来进行操作,Blob就是二进制,File继承自Blob,一般指代文件。

以前读取Blob内容只能用FileReader,现在Blob基类上也渐渐支持直接取出数据的方法了。

是谁教你这种写法的?你想传入一个 URL 然后获得这个 URL 所代表的 File 对象?那你方向完全是错的。

new File(['第一行', '第二行', '第三行'], '文件名');

这么构建出来的只能是一个文本文件(可以理解为 .txt),其中第一个参数表示这个文本文件每一行的内容。

你那个 size: 9 实际就是你传进去的 abff 变量的文本值字节长度。

//传入图片地址,获取图片Base64数据
      function getBase64ByImgUrl(url, callback){
        var canvas = document.createElement('canvas'),
          ctx = canvas.getContext('2d'),
          img = new Image;
        img.crossOrigin = 'Anonymous';

        img.onload = function(){
          canvas.height = img.height;
          canvas.width = img.width;
          ctx.drawImage(img,0,0);
          var dataURL = canvas.toDataURL('image/png');

          // console.log('base64-dataUrl: ', dataURL);

          callback(dataURL);
          canvas = null;
        };
        img.src = url;
      }

      //将base64转换为文件流
      function getFileByBase64(dataurl, filename) {
        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 File([u8arr], filename, {type:mime});
      }
      var url = 'http://cdn.wangyuanqi.com/avat.png';
      getBase64ByImgUrl(url, function(dataURL){

        //传入base64数据和文件名字
        var fileFlow = getFileByBase64(dataURL,'avat.png');
        console.log('fileFlow: ', fileFlow);

        //继续....
      })
宣传栏