javascript - "blob:http: ... "是什么？以及如何将其保存到文件中？

Question

我试图解释更多我的问题，但我想如果没有我的脏代码，用一些文字会更容易:

这是什么以及如何将它放入我的公共(public)文件夹中的文件中？

Blob :http://127.0.0.1/268ea876-5179-4a94-955c-7a191f8f84b5

我在上传 GPX 文件时得到了这个结果。我试图将它变成一个 blob 文件(使用 vuejs)，然后将其放入一个文件(使用 php)，但是它是空的，或者它只包含文本“blob:http://....”。无法获取此文件的内容。

如果我将它放在浏览器中，内容显示良好。

非常感谢，我希望我的问题在这里更清楚:)

Answer 1

什么是 Blob？

A Blob object represents a file-like object of immutable, raw data. Blobs represent data that isn't necessarily in a JavaScript-native format. The File interface is based on Blob, inheriting blob functionality and expanding it to support files on the user's system.

To construct a Blob from other non-blob objects and data, use the Blob() constructor. To create a blob that contains a subset of another blob's data, use the slice() method. To obtain a Blob object for a file on the user's file system, see the File documentation.

来源:https://developer.mozilla.org/en-US/docs/Web/API/Blob

如何保存到文件？

查看官方规范中的Filereader文档。

参见:https://w3c.github.io/FileAPI/#dfn-filereader

实际(简化)实现

import React, { useState, useEffect } from 'react'

export const Image = ({ fileOrBlob }) => {
  const [src, setSrc] = useState(null)

  useEffect(() => { loadFileOrBlob (fileOrBlob) }}, [])

  const loadFileOrBlob = file => {
    const reader = new FileReader()

    if (file.name === undefined) return
    reader.addEventListener('load', () => setSrc(reader.result))

    reader.readAsDataURL(file)
  }

  return src 
    ? <img alt="" src={src} className={styles.image} /> 
    : <span>[<em> Loading image... </em>]</span>
}

用PHP保存到文件中

可能您正在使用一些创建此 blob 的库。为了保存它，您的服务器端代码必须从 blob 接收实际数据并将其存储到文件中。大多数图书馆使用 ajax 请求来执行此操作。有一些不错的实现显示为 Dropzone.js 的示例。

例如:https://www.dropzonejs.com/#server-side-implementation