file.raw和file在formdata中上传时遇到的坑！！

本文介绍: 首先是这样，我在写一个表单上传页面的时候，结合 element e plus 遇到了需要上传图片文件和视频文件的情况，一顿上网猛搜，经过一二十篇博客浏览下来，找到了三四篇可以参考，但是对于到底是上传file 还是 file.raw 说法不一，于是我去查了FormDa t a、file、file.raw、blob的文档，弄清楚了一些他们之间的关系。file 接口也继承了blob 接口的所有属性，因为它太常见了，用法没有什么特别的，具体的就不细说啦~对应的属性值存在也不会覆盖原值，而是新增一个值，如果属性不存在则新增一项属性值。

首先是这样，我在写一个表单上传页面的时候，结合 element e plus 遇到了需要上传图片文件和视频文件的情况，一顿上网猛搜，经过一二十篇博客浏览下来，找到了三四篇可以参考，但是对于到底是上传file 还是 file.r a w 说法不一，于是我去查了FormDa t a、file、file.r a w、blob的文档，弄清楚了一些他们之间的关系。然后下面开始咔咔上知识点！

先说说formdata、b lob、file、file.raw分别都是什么：

1.FormData：

FormData 接口提供了一种表示表单数据的键值对 key/value 的构造方式，并且可以轻松的将数据通过 XMLHttpRequest.send() 方法发送出去，本接口和此方法都相当简单直接。如果送出时的编码类型被设为 "multipart/form-data"，它会使用和表单一样的格式。

常用方法：

FormData.append()

向 FormData 中添加新的属性值，FormData 对应的属性值存在也不会覆盖原值，而是新增一个值，如果属性不存在则新增一项属性值。

let form = new FormData();
form.append('title',videoForm.title);
form.append('introduction',videoForm.introduction);
form.append('file',formData.videoFile.raw);

Blob 对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取，也可以转换成 ReadableStream 来用于数据操作。它经常会用来表示 js 数据格式的文件，但不一定只能是js文件。

const obj = {hello: 'world'};
const blob = new Blob([JSON.stringify(obj, null, 2)], {type : 'application/json'});

let form = new FormData();
form.append('title',videoForm.title);
form.append('introduction',videoForm.introduction);
// 用file.raw上传视频文件
form.append('file',formData.videoFile.raw);
// 用Blob构造函数上传封面文件
if(hasImg){
  const blob=new Blob([formData.imgFile],{type:'png/jpeg/jpg'});
  form.append('thumbnail',blob);
}else{
  form.append('thumbnail',null);
    }