blob临时路径转File对象

最新推荐文章于 2024-12-19 11:26:52 发布

LitongZero

最新推荐文章于 2024-12-19 11:26:52 发布

阅读量6.9k

点赞数 10

CC 4.0 BY-SA版权

分类专栏：工具 # JavaScript 文章标签： taro-ui 上传文件 blob

本文链接：https://blog.csdn.net/LitongZero/article/details/111575702

工具同时被 2 个专栏收录

41 篇文章

订阅专栏

JavaScript

17 篇文章

订阅专栏

本文介绍如何将Taro-UI返回的blob格式图片临时路径转换为File对象，并通过multipart/form-data协议上传到服务器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

blob临时路径转File对象

最近在使用Taro-UI时，发现一个问题。

问题表象

在上传图片时，Taro-UI只提供了一个图片选择器，可以返回这个图片的临时路径，类似如下:

{
   "url":"blob:http://10.1.10.122:10086/4ebc5d64-bd9a-4994-8212-addf476ba2c2",
   "file": {
       "path":"blob:http://10.1.10.122:10086/4ebc5d64-bd9a-4994-8212-addf476ba2c2",
       "size":370876,
       "type":"image/jpeg",
       "lastModifiedDate":"2020-12-23T02:38:35.661Z","lastModified":1608691115661,
       "name":"1608691115661.jpeg"
   }
}

可以看到，图片的基本信息(大小、类型、长传时间，图片名称)。都包含在里面了，包括一个以blob:http:开头的临时路径。

解决思路

这个是不能直接传给后端的，需要转换为File格式，通过multipart/form-data协议才行。

解决方案

把临时路径转换为File对象，加入form-data。

// 其中
// imgObj = 上面那个对象
// imgObj.url = blob:http://10.1.10.122:10086/4ebc5d64-bd9a-4994-8212-addf476ba2c2

const imgBlob = await fetch(imgObj.url). then(r => r.blob())
const imgFile = new File([imgBlob], imgObj.file.name , { type: imgBlob.type })
const formData = new FormData();
formData.append("file", imgFile);
const res: any = await http.post("/api/uploadFile",formData);