【文件上传】blob、file、formdata区别

一、简单介绍

blob是原始的也是用的最多的；

file是input拿到的时候这个格式，从blob继承而来；

base64类似于string那种，可以传输方便直接用于图像展示，而blob是原始的。

一般base64用于图像展示，而blob、file用于文件上传。

二、具体区别

    formData就是将form表单元素的name和value进行组合，实现表单数据的序列化，从而减少表单元素的拼接，提高工作效率。
    Web API 提供了FormData方法，提供了一种表示表单数据的键值对的构造方式，通过FormData.append(key, value)向FormData中添加新的属性值。也可以使用已有的表单进行初始化（用form，拉下来new formdata（form 就有那些值）
    base64是一种基于64个可打印字符来表示二进制数据的表达方法，它常用于处理文本数据的场合，表示、传输、存储一些二进制数据。
    图片的base64编码就是将一张图片编码成一串字符串，使用该字符串可以代替图片地址，直接在浏览器打开是可以访问该图片的。[字符串！字符串！可以直接展示 】
    Blob表示二进制类型的大对象，通常是影像、声音或多媒体文件，在JS中Blob类型的对象表示不可变的类似文件对象的原始数据。

三、互相转换

（1）file、blob转base64

我们从input那个框里，获取的肯定是原始的file类型；

然后，file传递给file reader，并且给readAsDataURL， 转换成base64

但凡转base64都大概类似如此

let file = document.getElementById("imagefile").files[0]
let reader = new FileReader()
reader.readAsDataURL(file)
reader.onload = function () {
    console.log(reader.result)
}

（2）
Base64转换为File

    function dataURLtoFile(dataurl, filename) {
        var arr = dataurl.split(','),
            mime = arr[0].match(/:(.*?);/)[1],
            bstr = atob(arr[1]),
            n = bstr.length,
            u8arr = new Uint8Array(n);
        while (n--) {
            u8arr[n] = bstr.charCodeAt(n);
        }
        return new File([u8arr], filename, { type: mime });
    }

    需要传两个参数，第一个是数据，第二个是自定义文件名字符串
    转blob：

    return new Blob([u8arr], { type: mime });

    和转File基本一样，就最后一句return不一样

四、

Blob、FormData 和 File 是在 JavaScript 中处理二进制数据和文件上传的常用类型。它们之间的区别如下：

    Blob（Binary Large Object）：Blob对象只有slice方法，对文件分割。全称是binary large object,二进制大文件对象，非Javascript特有，计算机通用对象，MDN上解释是，一个Blob对象就是一个包含有只读原始数据的类文件对象，通俗讲就是不可修改的二进制文件
        Blob 是一种原始二进制数据类型，代表了不可变的类文件对象。
        Blob 可以包含任何类型的数据，例如文本、图像、音频或视频。
        Blob 对象通常由其他 API 或方法返回，如使用 fetch 方法获取服务器上的二进制数据。
        可以通过构造函数 new Blob([data], [options]) 创建 Blob 对象。（前面是data后面是type）

    FormData：
        FormData 是一种专门用于表单数据和文件上传的数据类型。
        FormData 可以包含键值对，其中键是字段名称，值是字段的值。
        FormData 可以动态添加字段和值，并通过 XMLHttpRequest 或 Fetch API 发送到服务器。
        FormData 还可以用于上传文件，通过 append 方法将文件添加到表单中。

    File：
        File 是继承自 Blob 的一种特殊类型，表示用户计算机上的文件。
        File 与 Blob 类似，但还包含一些与文件相关的额外信息，如文件名和最后修改时间等。
        在使用文件上传时，可以通过文件输入字段的 files 属性获取到一个包含用户选择的文件的 FileList 对象。

综上所述，Blob 是一种原始二进制数据类型，FormData 是用于表单数据和文件上传的数据类型，而 File 继承自 Blob，表示用户计算机上的文件，并包含一些与文件相关的额外信息。 \

 

 

另外还有一个，

antd文件上传样式太难用，自己写的：

我用的input的原生上传，然后把input隐藏掉，点击渲染部分地方则点击input。注意点击传入内容等于  inputRef.current?.click();这个操作是关键
       

const uploadImage = ({
  sourceImage,
  buttonContent,
}: {
  sourceImage?: string;
  buttonContent: React.ReactNode;
}) => {
const inputRef = useRef<HTMLInputElement>(null);
   
return (
    <div className={cx("container")}>
      <div
        onClick={() => {
          inputRef.current?.click();
        }}
      >
        {buttonContent}
      </div>
      <input
        ref={inputRef}
        className={cx("hidden-full")}
        type="file"
        accept="image/jpg,image/jpeg,image/png"
        id="ref-image"
        onChange={(evt) => selecedImage(evt.target)}
      />

      <Modal visible={visible} onCancel={() => setVisible(false)}  >
        <Cropper src={showBase64} />
      </Modal>
    </div>

 

const file = input.files![0];
    input.value = "";
    const url = URL.createObjectURL(file);
    const blob = (await fileToBlob(file)) as Blob;
    console.log(url, blob, "111");