将图像 URL 转换为 File 实例
P粉121447292
P粉121447292 2023-09-04 14:58:36
[JavaScript讨论组]
<p>我有图像数据数组,并尝试将其转换为<code>文件</code>数组</p> <pre class="brush:php;toolbar:false;">const images = [ { img: &quot;http://localhost/images/1.jpg&quot;, name: &quot;1.png&quot;, mime_type: &quot;image/jpeg&quot; }, { img: &quot;http://localhost/images/2.jpg&quot;, name: &quot;2.png&quot;, mime_type: &quot;image/jpeg&quot; }, ] const res: File[] = images.map(function (item) { return new File([item.img], item.name, { type: item.mime_type }) })</pre> <p>这不起作用:(据我了解,base24 中转换后的图像应该传递给文件构造函数?我该怎么做?</p> <p>更新: 我有一个 VUE 组件来处理图像。输入组件具有数组类型的属性。如何根据数据库返回的数据创建数组。从数据库返回:图像链接、名称和类型。</p> <p>UPD2答案:</p> <pre class="brush:php;toolbar:false;">let PhotosAsFile: File[] = [] const _photos = [ { url: &quot;http://localhost:8080/images/1.jpeg&quot;, name: &quot;name1&quot;, mime_type: &quot;image/jpeg&quot; }, { url: &quot;http://localhost:8080/images/2.jpeg&quot;, name: &quot;name2&quot;, mime_type: &quot;image/jpeg&quot; }, { url: &quot;http://localhost:8080/images/3.jpeg&quot;, name: &quot;name3&quot;, mime_type: &quot;image/jpeg&quot; }, ] const data: Promise&lt;File&gt;[] = _photos.map(async function (item): Promise&lt;File&gt; { const myBlob: Blob = await getBlobFromUrl(item.url) const extensionsFile: RegExpMatchArray | null | undefined = item.url?.match(/\.([^.]+)$/) return new File([myBlob], extensionsFile &amp;&amp; item.name ? item.name + &quot;.&quot; + extensionsFile[1] : &quot;image.jpeg&quot;, { type: item.mime_type ?? &quot;image/jpeg&quot;, }) }) Promise.all(data).then((values: File[]): void =&gt; { PhotosAsFile = values }) const getBlobFromUrl = (url): Promise&lt;Blob&gt; =&gt; { return new Promise((resolve, reject): void =&gt; { const request: XMLHttpRequest = new XMLHttpRequest() request.open(&quot;GET&quot;, url, true) request.responseType = &quot;blob&quot; request.onload = () =&gt; { resolve(request.response) } request.onerror = reject request.send() }) }</pre></p>
P粉121447292
P粉121447292

全部回复(1)
P粉680087550

要创建文件(我不确定您为什么需要它),您需要传入二进制数据

https://developer.mozilla.org/en -US/docs/Web/API/File/File

这是内存中的一个文件。您无法从磁盘读取它。您无法将其写入磁盘。我猜你可以将其设置为值并作为 FormData 发送。

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号