前言
在前端开发中，我们常常需要使用到文件上传功能。此时，我们可能会选择使用一些常见的第三方库，如 jQuery File Upload 和 Plupload。然而，这两个插件需要使用特定的后端技术支持，不够灵活。如果你正在寻找一种更加轻便且易于使用的文件上传解决方案，那么 yars 可能正是你需要的。
yars 是一个基于纯 JavaScript 的文件上传工具，它可以轻松地集成到现有的应用程序中。此外，yars 还提供了许多有用的功能，如上传进度显示和上传文件的临时存储，使它成为一个更好的选择。
在本教程中，我们将探讨如何使用 yars 进行文件上传。
安装 yars
在开始使用 yars 之前，我们需要先安装它。我们可以通过 npm 来安装 yars：
npm install yars
在安装 yars 后，我们就可以在项目中使用它了。
基本用法
要使用 yars，我们需要引入它并初始化。在 HTML 文件中，我们可以添加以下标记：
<input type="file" id="fileInput" /> <button id="submitButton">提交</button>
在 JavaScript 文件中，我们需要使用以下代码初始化 yars：
const fileInput = document.getElementById('fileInput');
const submitButton = document.getElementById('submitButton');
const yarsUpload = new Yars({
input: fileInput,
submitButton: submitButton,
endpoint: '/upload'
});其中：
input表示文件上传输入框。submitButton表示提交按钮，当我们选择完文件后，点击该按钮即可上传文件。endpoint为上传文件的接口地址。
这样，我们就可以通过 yars 进行文件上传了。
上传进度显示
yars 还提供了上传进度显示的功能。我们只需要添加以下标记：
<div id="progressBar"></div>
并在 JavaScript 文件中使用以下代码：
const progressBar = document.getElementById('progressBar');
yarsUpload.on('progress', (event) => {
const percent = event.percent;
progressBar.style.width = percent + '%';
});这样，我们就可以实现上传进度显示了。
上传文件的临时存储
由于 yars 是基于纯 JavaScript 的文件上传工具，我们无法直接将文件保存在服务器上。但是，yars 提供了上传文件的临时存储功能，我们可以使用以下代码将文件保存在内存中：
yarsUpload.on('done', (response) => {
console.log(response.file);
});在上面的代码中，response.file 会返回一个表示上传文件的对象，我们可以将它存储在数据库中，或者在下一步操作中使用它。
结论
在本教程中，我们介绍了如何使用 yars 进行文件上传，并探讨了 yars 的一些有用功能。yars 是一个轻便且易于使用的文件上传工具，它为我们的应用程序带来了许多优势。希望这篇文章对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005620181e8991b448df71c