file对象转blob对象进行预览的实例代码

file对象转blob对象进行预览的实例代码: //获取到 file文件var reader = new FileReader();reader.readAsArrayBuffer(file);reader.onload = function (event) { let blob = new Blob([event.target.result], { type: file.type }); //{ type: file.type } 预览blob发现乱码可能是type不对 要获取file文件的
 file对象转blob对象进行预览的实例代码:
//获取到 file文件
var reader = new FileReader();
reader.readAsArrayBuffer(file);
reader.onload = function (event) {
  let blob = new Blob([event.target.result], { type: file.type });
   //{ type: file.type } 预览blob发现乱码可能是type不对  要获取file文件的type
  window.URL = window.URL || window.webkitURL;
  let blobURL = window.URL.createObjectURL(blob);
  //blobURL 就是需要的blob预览路径
  //下面是获取图片的大小
  var img = new Image(); 
  img.src = blobURL;
  if (img.complete) {
	console.log(img, img.width, img.height)
  } else {        
	img.onload = function () {
	  console.log(img, img.width, img.height)
	}
 }
}
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

js文件上传前的预览和删除实例代码,具体如下: !DOCTYPE htmlhtml lang="en" head meta charset="UTF-8" / meta http-equiv="X-UA-Compatible" content="IE=edge" / meta name="viewport" content="width=device-width, initial-scale=1.0" / title文件上传预览和删除/title style #img-box{display: flex;
html页面:添加这一行 contentType: application/x-www-form-urlencoded !DOCTYPE htmlhtml lang="en"head meta charset="UTF-8" meta name="viewport" content="width=device-width, initial-scale=1.0" title显示小区信息/title script src="https://cdn.staticfile.org/jquery/1.10.2/jq
Upload single image from axios to FastAPI: quot;Expected UploadFile, received: lt;class #39;str#39;gt;quot;(从AXios上载单个图像到FastAPI:quot;预期UploadFile,收到:lt;class#39;str#39;gt;quot;)
Error in Amplify installation into existing Vue/Bootstrap project: You may need an appropriate loader to handle this file type(将Amplify安装到现有Vue/Bootstrap项目时出错:您可能需要适当的加载程序来处理此文件类型)
Local HTML file won#39;t load properly into Dash application(本地HTML文件无法正确加载到Dash应用程序中)
Attach file from PC in Gmail Draft using Google App Script(使用Google App脚本在Gmail草稿中从PC附加文件)