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

标签 javascript php

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

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

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

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

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

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

最佳答案

什么是 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

关于javascript - "blob:http: ... "是什么?以及如何将其保存到文件中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56602344/

相关文章:

php - MySQL SELECT 以 PK 作为结果集的键

javascript - 来自 Cloud Function 的未处理拒绝,但它有时会运行

javascript - 可折叠菜单变体

javascript - 在使用函数表达式声明函数之前调用函数是可行的。为什么?

javascript - 使用工厂函数的 AngularJS Controller

php - 页面请求过多

php - 避免 php 和 javascript 之间的重复代码

javascript - jQuery - 显示一个 DIV 并隐藏多个其他

PHP 图片 uploader 不适用于 Capital JPG 扩展

php - 如何修复 SQLSTATE[HY000] [1049] 未知数据库