为了账号安全,请及时绑定邮箱和手机立即绑定

如何从对象URL获取文件或blob?

/ 猿问

如何从对象URL获取文件或blob?

慕桂英4014372 2019-09-20 16:24:08

我允许用户通过拖放和其他方法将图像加载到页面中。删除图像时,我正在使用URL.createObjectURL转换为对象URL来显示图像。我没有撤销网址,因为我重复使用它。

所以,当谈到时间来创建一个FormData对象,所以我可以让他们上传的形式,在它的形象之一,是有一些方法,然后我可以扭转这一目标URL回一个BlobFile因此我可以将其添加到FormData宾语?


查看完整描述

3 回答

?
慕仙森

正如gengkev在上面的评论中提到的,看起来最好/唯一的方法是使用异步xhr2调用:


var xhr = new XMLHttpRequest();

xhr.open('GET', 'blob:http%3A//your.blob.url.here', true);

xhr.responseType = 'blob';

xhr.onload = function(e) {

  if (this.status == 200) {

    var myBlob = this.response;

    // myBlob is now the blob that the object URL pointed to.

  }

};

xhr.send();

更新(2018):对于可以安全使用ES5的情况,Joe在下面有一个更简单的基于ES5的答案。


查看完整回答
反对 回复 2019-09-20
?
一只名叫tom的猫

现代解决方案


let blob = await fetch(url).then(r => r.blob());

url可以是对象url或普通url。


查看完整回答
反对 回复 2019-09-20
?
慕盖茨9453107

也许有人在使用React / Node / Axios时觉得这很有用。我react-dropzone在UI上使用它来实现我的Cloudinary图像上传功能。


    axios({

        method: 'get',

        url: file[0].preview, // blob url eg. blob:http://127.0.0.1:8000/e89c5d87-a634-4540-974c-30dc476825cc

        responseType: 'blob'

    }).then(function(response){

         var reader = new FileReader();

         reader.readAsDataURL(response.data); 

         reader.onloadend = function() {

             var base64data = reader.result;

             self.props.onMainImageDrop(base64data)

         }


    })


查看完整回答
反对 回复 2019-09-20

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信