讲透前端文件切片上传、断点续传、拖拽上传、图片预览、文件下载

github仓库

要了解文件上传，首先需要了解blob对象。

Blob

全称是 binary large object,二进制大文件对象，非 Javascript 特有，计算机通用对象，不可修改。

构造函数：Blob

new Blob(blobBits[, options])

blobBits：一个数组，成员可以是二进制对象或字符串，表示 Blob 的内容。
options：可选参数，可以设置以下两个属性：

type：默认值为 ""，它代表了将会被放入到 blob 中的数组内容的 MIME 类型。
endings：表示换行符的类型，可以是"transparent"、"native"或"lf"、"cr"、"crlf"。默认为"transparent"。

Blob的核心方法：
slice([start[, end[, contentType]]])
返回一个新的 Blob 对象，包含原 Blob 对象的一部分数据。

start：可选，类型为 Number，表示开始位置的索引，默认值为 0。
end：可选，类型为 Number，表示结束位置的索引，默认值为 blob 的大小。
contentType：可选，类型为 String，表示新 Blob 对象的 MIME 类型，默认值为原 Blob 对象的 MIME 类型。

例子：

const myBlob = new Blob(["了解Blob"], { type: "text/plain" });

blob.png

使用场景：

1、分片上传
File 对象是特殊类型的 Blob，且可以用在任意的 Blob 类型的上下文中。所以针对大文件传输的场景，我们可以使用 slice 方法对大文件进行切割，然后分片进行上传，具体示例如下：

const file = new File(["a".repeat(1000000)], "test.txt");
const chunkSize = 40000;
const url = "https://httpbin.org/post";
async function chunkedUpload() {
  for (let start = 0; start < file.size; start += chunkSize) {
    const chunk = file.slice(start, start + chunkSize + 1);
    const fd = new FormData();
    fd.append("data", chunk);
    await fetch(url, { method: "post", body: fd }).then((res) =>
      res.text()
    );
  }
}

2、预览图片

/* 使用blob预览 */
const fileDom = document.getElementById("file");
const file = e.target.files[0];
const img = document.getElementById("img");
// File是Blob的子类，所以可以直接使用Blob的方法
// const blob = new Blob([file], { type: "image/png" });
img.src = URL.createObjectURL(blob);


/* 使用base64预览 */
const fileDom = document.getElementById("file");
const file = e.target.files[0];
const img = document.getElementById("img");
// FileReader将file转换为base64
const fileReader = new FileReader();
fileReader.readAsDataURL(file);
fileReader.onload = (e) => {
  img.src = e.target.result
};

3、下载文件

fetch('xxxx')
  .then(function (response) {
    // 使用fetch获取到的response对象的blob方法，将文件转换为blob对象
    return response.blob();
  })
  .then(function (myBlob) {
    /* 
    URL.createObjectURL(blob)生成的 URL 存储了一个 URL → Blob 映射。
    
    但实际上它也有副作用。虽然存储了 URL → Blob 的映射，但 Blob 本身仍驻留在内存中，浏览器无法释放它。映射在文档卸载时自动清除，因此 Blob 对象随后被释放。

    但是，如果应用程序寿命很长，那不会很快发生。因此，如果我们创建一个 Blob URL，即使不再需要该 Blob，它也会存在内存中。

    对这个问题，我们可以调用 URL.revokeObjectURL(url) 方法，从内部映射中删除引用，从而允许删除 Blob
     */

    let objectURL = URL.createObjectURL(myBlob);
    const link = document.createElement("a");
    // 设置下载链接
     link.href = objectURL;
    // 文件名称（类型）
    ink.download = 'test.png';
    ink.click();
    ink.remove();
    URL.revokeObjectURL(link.href);
  });

File

const file = document.getElementById("file");
// 获取文件
const file = input.current.files[0];

// file文件是File类型
console.log(file instanceof File); // true

File 对象代表一个文件，用来读写文件信息。它继承了 Blob 对象，或者说是一种特殊的 Blob 对象，所有可以使用 Blob 对象的场合都可以使用它。

构造函数：File

new File(fileBits, fileName[, options])

fileBits：一个数组，成员可以是二进制对象或字符串，表示文件的内容。
fileName：文件名。
options：可选参数，可以设置以下两个属性：

lastModified：文件最后修改时间，单位为毫秒，如果不传入该参数，会使用当前时间。
type：文件类型，如果不传入该参数，会根据文件名自动判断。（MIME）

例子：

var file = new File(["hello world"], "hello.txt", {
  type: "text/plain",
});

适用于Blob的所有方法，File也可以使用

切片上传
预览图片
下载文件

FileReader

FileReader是一种异步读取文件机制。

FileReader提供了如下方法：

readAsDataURL(file)：读取文件内容，结果用data:url的字符串形式表示（base64）
readAsText(file, '编码方式')：按字符读取文件内容，结果用字符串形式表示
abort()：终止文件读取操作

例子：

var reader = new FileReader();
reader.readAsText(file);
reader.onload = function () {
     var txt = reader.result;
}

FormData

FormData提供了一种表示表单数据的键值对 key/value 的构造方式，我们可以异步上传一个二进制文件（Blob）。

const formData = new FormData();
formData.append("file", file);
...

formData.append()：添向 FormData 中添加新的属性值，FormData 对应的属性值存在也不会覆盖原值，而是新增一个值，如果属性不存在则新增一项属性值。
formData.get()：获取一个键值对
formData.getAll()：获取所有键值对
formData.has()：判断是否存在某个键值对
formData.delete()：删除某个键值对
formData.set()：设置某个键值对

上传文件主要分为两种方式：点击上传以及拖拽上传。

点击上传

// 单文件上传
const App = () => {
  const change = e => {
    const file = e.target.files[0];
    // 我们可以通过file.type来获取文件的类型，从而判断是否是图片或者限制上传的文件类型
    // const type = file.type;
    const formData = new FormData();
    formData.append('file', file);
    axios.post('http://localhost:1111/upload', formData).then(res => {
      console.log(res);
    }
    );
  };
  // accept属性用来限制上传的文件类型，可以是图片、视频、音频等
  return (
    <div className={styles.root}>
      <input type="file" onChange={change} /* accept=".jpeg,.png" */ />
    </div>
  );
};

// 多文件上传

/* 
  遍历上传
  我们可以给input标签添加multiple属性，这样就可以上传多个文件了。
  然后再通过e.target.files获取到所有的文件，然后遍历上传即可。
*/

/* 
  合并上传
  我们可以将所有的文件合并成一个FormData对象，然后一次性上传。
  但是这样会有一个问题，就是后端无法区分每个文件，所以我们需要在FormData对象中添加一个字段，用来区分每个文件。
  例如：formData.append('file', file, file.name);
  这样后端就可以通过file.name来区分每个文件了。
*/

/* 
  我们也可以不设置multiple属性，达到多文件上传的目的（一个一个的添加，缓存进数组里面再一次性上传）
*/

图片预览

// 图片预览
const App = () => {
  const [base64, setBase64] = useState('');
  const change = e => {
    // file转base64预览

    // const file = e.target.files[0];
    // const fileReader = new FileReader();
    // fileReader.readAsDataURL(file);
    // fileReader.onload = e => {
    //   setBase64(e.target.result);
    // };

    // url -> blob映射预览
    const file = e.target.files[0];
    const url = URL.createObjectURL(file);
    setBase64(url);
  };
  return (
    <div className={styles.root}>
      <input type="file" onChange={change} />
      <img src={base64} />
    </div>
  );
};

服务器文件下载

// 设置responseType为blob
// 接口数据返回的是一个blob类型的数据，我们可以通过URL.createObjectURL()方法将其转换成一个url，然后通过a标签的download属性来下载文件。
const App = () => {
  useEffect(() => {
    axios.get('http://localhost:1111/download',{
      responseType: 'blob'
    }).then(res => {
      const url = URL.createObjectURL(res.data);
      const a = document.createElement('a');
      a.href = url;
      a.download = 'test.png';
      a.click();
      URL.revokeObjectURL(url);
    });
  }, []);
  return (
    <div className={styles.root}></div>
  );
};

切片上传

// 设置每个片段的大小chunkSize
// 使用blob的slice分片，大小根据chunkSize以及上传到的start决定。直到start > file.size
const App = () => {
  const change = e => {
    const file = e.target.files[0];
    const chunkSize = 4000;
    const url = "http://localhost:1111/upload";
    async function chunkedUpload() {
      for (let start = 0; start < file.size; start += chunkSize) {
        const chunk = file.slice(start, start + chunkSize + 1);
        const fd = new FormData();
        fd.append("file", chunk);
        await axios.post(url, fd);
      }
    }
    chunkedUpload();
  };
  return (
    <div className={styles.root}>
      <input type="file" onChange={change} />
    </div>
  );
};

断点续传

// 通过current记录当前上传到的位置，通过pauseRef.current来判断是否暂停
// chunkCount = Math.ceil(fileSize / chunkSize) 计算出总共需要上传的片段数
const App = () => {
  const [file, setFile] = useState({});
  const [current, setCurrent] = useState(0);

  const pauseRef = useRef(false);
  const [pause, setPause] = useState(false);

  const change = e => {
    const _file = e.target.files[0];
    setFile(_file);
  };

  const upload = async file => {
    const chunkSize = 4000;
    const url = "http://localhost:1111/upload";
    const fileSize = file.size;
    const chunkCount = Math.ceil(fileSize / chunkSize);
    for (let i = current; i < chunkCount; i+=1) {
      if (pauseRef.current) return;
      const start = i * chunkSize;
      const end = (i + 1) * chunkSize;
      const chunk = file.slice(start, end);
      const fd = new FormData();
      fd.append("file", chunk);
      await axios.post(url, fd);
      setCurrent(i + 1);
    }
  };

  const clickPause = () => {
    pauseRef.current = !pauseRef.current;
    setPause(pauseRef.current);
    if (!pauseRef.current) upload(file);
  };

  return (
    <div className={styles.root}>
      <input type="file" onChange={change} />
      <button onClick={() => upload(file)}>上传</button>
      <button onClick={clickPause}>
        {pause ? '继续' : '暂停'}
      </button>
    </div>
  );
};

上传进度

大文件切片上传，可以通过计算每个片段的大小，然后计算出总共需要上传的片段数，然后通过current / chunkCount来计算出进度。

const App = () => {
  const [file, setFile] = useState({});
  const [current, setCurrent] = useState(0);
  const [progress, setProgress] = useState(0);

  const pauseRef = useRef(false);
  const [pause, setPause] = useState(false);

  const change = e => {
    const _file = e.target.files[0];
    setFile(_file);
  };

  const upload = async file => {
    const chunkSize = 4000;
    const url = "http://localhost:1111/upload";
    const fileSize = file.size;
    const chunkCount = Math.ceil(fileSize / chunkSize);
    for (let i = current; i < chunkCount; i+=1) {
      if (pauseRef.current) return;
      const start = i * chunkSize;
      const end = (i + 1) * chunkSize;
      const chunk = file.slice(start, end);
      const fd = new FormData();
      fd.append("file", chunk);
      await axios.post(url, fd);
      setCurrent(i + 1);
      setProgress(Math.floor((i + 1) / chunkCount * 100));
    }
  };

  const clickPause = () => {
    pauseRef.current = !pauseRef.current;
    setPause(pauseRef.current);
    if (!pauseRef.current) upload(file);
  };

  return (
    <div className={styles.root}>
      <input type="file" onChange={change} />
      <button onClick={() => upload(file)}>上传</button>
      <button onClick={clickPause}>
        {pause ? '继续' : '暂停'}
      </button>
      <div className={styles.progress}>
        {progress}%
      </div>
    </div>
  );
};

通过xhr的onprogress来计算进度

const App = () => {
  const [file, setFile] = useState({});
  const [progress, setProgress] = useState(0);

  const change = e => {
    const _file = e.target.files[0];
    setFile(_file);
  };

  const upload = async file => {
    const url = "http://localhost:1111/upload";
    const fd = new FormData();
    fd.append("file", file);
    await axios.post(url, fd, {
      onUploadProgress: e => {
        const percent = Math.floor((e.loaded / e.total) * 100);
        setProgress(percent);
      }
    });
  };

  return (
    <div className={styles.root}>
      <input type="file" onChange={change} />
      <button onClick={() => upload(file)}>上传</button>
      <div className={styles.progress}>
        {progress}%
      </div>
    </div>
  );
};

拖拽上传

const App = () => {
  const dragover = e => {
    // 阻止默认事件
    e.preventDefault();
    // 阻止冒泡
    e.stopPropagation();
  };

  const drop = e => {
    // 阻止默认事件
    e.preventDefault();
    // 阻止冒泡
    e.stopPropagation();
    // DataTransfer表示拖放操作中的数据
    const file = e.dataTransfer.files[0];
    const formData = new FormData();
    formData.append('file', file);
    axios.post('http://localhost:1111/upload', formData).then(res => {
      console.log(res);
    }
    );
  };

  return (
    <div className={styles.root} onDragOver={dragover} onDrop={drop} >
      请拖到此处上传
      <input type="file" />
    </div>
  );
};

最后编辑于：2023.03.14 14:30:34

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 194,088评论 5赞 459
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 81,715评论 2赞 371
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 141,361评论 0赞 319
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 52,099评论 1赞 263
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 60,987评论 4赞 355
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 46,063评论 1赞 272
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 36,486评论 3赞 381
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 35,175评论 0赞 253
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 39,440评论 1赞 290
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 34,518评论 2赞 309
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 36,305评论 1赞 326
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 32,190评论 3赞 312
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 37,550评论 3赞 298
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 28,880评论 0赞 17
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 30,152评论 1赞 250
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 41,451评论 2赞 341
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 40,637评论 2赞 335