js 通过文件地址URL转为File文件对象

这篇具有很好参考价值的文章主要介绍了js 通过文件地址URL转为File文件对象。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

js 通过文件地址URL转为File文件对象


前言

后端返回的是文件地址,并不是文件流或base64编码字符串,而修改数据的接口又只接受文件。

一、思路

通过文件地址URL,将所指文件转为File文件对象

二、示例

文件url地址转为文件对象,代码如下(调用即可):

//
getFileFromUrl(url, fileName) {
          return new Promise((resolve, reject) => {
              var blob = null;
              var xhr = new XMLHttpRequest();
              xhr.open("GET", url);
              xhr.setRequestHeader('Accept', 'image/png');
              xhr.responseType = "blob";
              // 加载时处理
              xhr.onload = () => {
              	// 获取返回结果
                  blob = xhr.response;
                  let file= new File([blob], fileName, { type: 'image/png' });
                  // 返回结果
                  resolve(file);
              };
              xhr.onerror = (e) => {
                  reject(e)
              };
              // 发送
              xhr.send();
          });
      }

2.调用方式

代码如下(示例):文章来源地址https://www.toymoban.com/news/detail-693293.html

let file = null
this.getFileFromUrl(url,name)
	.then((response)=>{
      file = response
    })
	.catch((e)=>{
	  console.error(e)
    });

到了这里,关于js 通过文件地址URL转为File文件对象的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue中,给一个URL地址,利用FileSaver.js插件下载文件到本地

    ①首先下载 FileSaver.js 插件    ②在需要的.vue页面引入  在HTML中引入 ③ 如果想保存一个TXT文档本地 结果:   内容:    ④ 如果想保存一个图片 结果:  图片内容:  如果图片不允许跨域则会出现这种情况:   ⑤下面这个方法则可以完美的解决跨域问题,不光可以下载图

    2024年02月06日
    浏览(58)
  • flutter 网络地址URL转file

    方法1 方法2 方法3

    2024年02月09日
    浏览(35)
  • vue 中从后端获取到文件的 url 地址,前端根据 url 地址下载文件

    项目用的是 vben admin 框架,用的是 vue3 + TS 项目需求数据导出功能,前端需要实现文件下载功能 后端返回的是文件的 url 地址 (本项目中返回的是阿里云 oss 的文件地址) 从后端得到的是一个 url 地址,先通过 fetch api 请求这个 url 地址并转换成 blob 对象,通过 URL.createObjectUrl() 将 blo

    2024年02月06日
    浏览(49)
  • unity webGL与js 交互(获取地址栏URL)

    1.unity传值给js unity中: js中: 2.js传值给unity 参数一 Cookie:场景中物体的名称 (最上层父物体名字,否则无法成功传值) 参数二 OnCookie_Callback:方法名称 参数三 result:值 unity中: 完整: unity场景中物体的名称  untiy代码: js代码:

    2024年02月04日
    浏览(50)
  • 通过访问URL地址,5分钟内渗透你的网站!很刑很可拷!

    今天我来带大家简单渗透一个小破站,通过这个案例,让你深入了解为什么很多公司都需要紧急修复各个中间件的漏洞以及进行URL解析拦截等重要操作。这些措施的目的是为了保护网站和系统的安全性。如果不及时升级和修复漏洞,你就等着被黑客攻击吧! 首先,我想说明一

    2024年02月05日
    浏览(39)
  • 🔥🔥通过访问URL地址,5分钟内渗透你的网站!很刑很可拷!

    今天我来带大家简单渗透一个小破站,通过这个案例,让你深入了解为什么很多公司都需要紧急修复各个中间件的漏洞以及进行URL解析拦截等重要操作。这些措施的目的是为了保护网站和系统的安全性。如果不及时升级和修复漏洞,你就等着被黑客攻击吧! 首先,我想说明一

    2024年02月05日
    浏览(39)
  • js实现base64,url,blob之间的相互转换

    一般来说前端展示图片会通过三种方式: url、base64、blob 1.url: 一般来说,图片的显示还是建议使用url的方式比较好。 2.base64: 如果图片较大,图片的色彩层次比较丰富,则不适合使用这种方式,因为其Base64编码后的字符串非常大,会明显增大HTML页面,影响加载速度。如果图

    2023年04月27日
    浏览(53)
  • Java 根据网络地址URL获取文件

    系统需要根据提供的文件地址URL获取该文件,代码实现如下:

    2024年02月11日
    浏览(53)
  • java通过url读取文件内容

     使用java获取远程服务器的文件,并读取内容(该文件可以通过Url直接获取) 使用的时候稍作修改,将inputLine赋值,然后使用,否则直接在下面调用为nul,因为循环过后inputLine变成null!!!(按行读取)

    2024年02月12日
    浏览(56)
  • js实现base64、url和blob之间相互转换的三种方式

    Blob对象表示一个不可变、原始数据的类文件对象,Blob表示的不一定是JavaScript原生格式的数据,下面这篇文章主要给大家介绍了关于js实现base64、url和blob之间相互转换的三种方式 url 转 base64 Blob 转 url Blob 转 base64 base64 转Blob base64 转 url 一般来说前端展示图片会通过三种方式:

    2024年02月03日
    浏览(50)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包