JavaScript前端文件上传与图片缩略图生成技巧

引言

前端向服务器提交数据时，若涉及头像、视频等非文本文件，无法直接采用JSON格式传输。

利用type属性设为“file”的input表单项，可获取用户上传的文件。

<form action="">
    <input type="file" name="file">
</form>

为表单项绑定change事件，在事件对象中即可获取上传的文件信息。

<script>
    const inp = document.querySelector("input")
    inp.onchange = function(e) {
      console.log(e.target.files);
    }
</script>

需注意 e.target.files 为类数组(FileList)，存储所有上传文件；本例仅上传单个文件，故通过 e.target.files[0] 提取该文件对象（如需多文件上传，可在input标签添加multiple属性）。

文件对象简介

在掌握文件上传前，需先了解四个与文件相关的内置对象。

Blob

Blob用于存储二进制数据，实际开发中较少直接使用。

size属性返回Blob对象的字节数，即文件大小。

const input = document.getElementById('input');
const output = document.getElementById('output');
input.addEventListener('change', (e) => {
output.innerText = `文件的大小为${e.target.files[0].size}`;
});

slice()方法对Blob对象进行切片，返回新的Blob对象。
利用此方法可实现大文件切片上传功能。

var blob = new Blob().slice([start [, end [, contentType]]]};
/*
- start 开始位置的下标
- end 结束位置的下标
- contentType 给新的Blob赋予一个新的文档类型。这将会把它的 type 属性设为被传入的值。它的默认值是一个空的字符串
*/

File

通常，File对象源自用户在 <input> 元素上选择文件后返回的FileList对象，或由拖放操作生成的DataTransfer对象产生。
file对象作为Blob的子类，可直接调用Blob中的方法与属性。

const input = document.getElementById('input');
input.addEventListener('change', (e) => {
  let file = e.target.files[0]
  if(file.size > 4 * 1024 * 1024 || file.type != "image/jpeg"){
      alert("文件不得大于4M，且图片格式要为jpg格式。")
  }
});

FileReader

异步读取用户计算机上文件（或原始数据缓冲区）内容，通过File或Blob对象指定待读取文件。

var fr = new FileReader();

readAsDataURL()用于读取指定的Blob或File对象；读取完成后readyState变为已完成(DONE)，触发loadend事件，result属性包含表示文件内容的data:URL格式字符串（base64编码）。

fr.readAsDataURL(blob)
/*
- blob,被读取的 blob 或 file对象
*/

readAsText()将Blob或File对象按特定编码格式转化为字符串形式的内容。

fr.readAsDataURL(blob)
/*
- blob,被读取的 blob 或 file对象
*/

注意，上述两方法均为异步执行，需等待执行完成方可查看结果，直接查看将返回undefined。需为fr挂载load或loadend事件，在回调中使用result属性以获取结果。

<input type="file" onchange="previewFile()">
<img src="" height="200">
<script>
function previewFile(e) {
  var img = document.querySelector('img');
  let file = e.target.files[0];
  let fr = new FileReader();
  reader.readAsDataURL(file);
  fr.addEventListener("load", function () {
    img.src = fr.result;
  });
}
</script>

FormData

提供一种表示表单数据的键值对(key/value)构造方式。
在<form>标签中，直接点击提交按钮时，浏览器默认以x-www-form-urlencoded数据格式向服务器提交数据。
为form标签设置enctype属性，可指定发送的数据格式。

<!-- 
application/x-www-form-urlencoded 在发送前编码所有字符（默认）
multipart/form-data  不对字符编码。在使用包含文件上传控件的表单时，必须使用该值
text/plain           空格转换为 "+" 加号，但不对特殊字符编码。
-->
<form action="/upload" enctype="multipart/form-data" method="post">
    <input type="text" name="username">
    <input type="password" name="password">
    <input type="file" name="file">
    <input type="submit">
</form>

前述示例中，浏览器以formdata格式发送表单数据；但在框架开发中，通常不直接使用表单提交，而是提取表单数据手动构建相应格式，再通过aixos发送至服务器，因此需主动使用FormData对象封装file对象。

append()方法向FormData添加新属性值；若属性已存在则不覆盖原值，而是新增一项；若属性不存在则新增属性值。

function previewFile(e) {
    const formdata = new FormData()
    formData.append("userAvatar", e.target.files[0]);
}
/*
    第一个值为文件名称，第二个值为要传送的文件对象/字符串
*/

文件对象之间的关系

由上图可知，通过input标签上传文件可获得file对象，file与blob对象可互相转换；但file对象无法直接上传至服务器，因后端无法识别该对象，故需将文件对象包装为formdata对象或转换为base64等文本格式后再传给后端。

function previewFile(e) {
  let file = e.target.files[0];
  let formdata = new FormData()
  formdata.append("userAva", file)    // 注意，若要实现大文件分片上传时，同一个文件分片的文件名要相同，方便后端拼接
  axios.post("http://localhost/...", {
      data: formdata
  }).then( res => {
      console.log(res)
  )
}

缩略图的实现

通过input标签上传图片后，用户无法预览所提交图片。

为提升用户体验，在用户提交图片后，将图片显示于页面中。

<form action="">
  <input type="file" name="file"><br/>
  <img src="" alt="">
</form>
<script>
  const inp = document.querySelector("input")
  const img = document.querySelector("img")
  const fr = new FileReader()
  inp.onchange = function(e) {
    let file = e.target.files[0]
    fr.readAsDataURL(file)
  }
  fr.onload = function() {
    img.src = fr.result
  }
</script>

未提交前

提交后

总结

前端上传文件时，需使用FormData对象对文件进行包装后方可传给服务器。
获取用户上传的图片后，利用FileReader对象提供的readAsDataUrl()方法，将图片转化为base64格式，再使img标签加载base64编码，实现缩略图效果。

以上为js前端上传文件缩略图技巧示例详解的详细内容，更多关于js前端上传文件缩略图的资料请关注本站其它相关文章！

JS前端实现文件上传与缩略图预览详解

引言