也可以使用pm2启动服务器

请求主体传递给服务器的数据格式：FormData/x-ww-form-urlencoded/json字符串/普通文本宇符串/Buffer..

这段代码使用了Axios库来创建一个实例，然后设置了一些默认配置和拦截器。

首先，使用axios.create()方法创建了一个名为instance的Axios实例。接下来，通过instance.defaults对象设置了一些默认配置：

最后，使用instance.interceptors.response.use()方法设置了一个响应拦截器，用于在接收到响应后对响应数据进行处理。这个拦截器会将响应数据中的data字段提取出来并返回，以便后续处理。

上传文件到服务器

这段代码实现了一个点击事件监听器，用于将已选择的文件上传到服务器。

具体来说，代码首先定义了一个名为changeDisable的函数，用于在上传文件的过程中禁用上传按钮，并显示一个加载中的状态。这个函数接受一个名为flag的参数，如果flag为true，则表示需要禁用上传按钮并显示加载中的状态，否则表示需要恢复上传按钮的状态。

接下来，代码获取了一个名为upload_button_upload的DOM元素，并为其添加了一个点击事件监听器。当用户点击这个按钮时，会执行一个回调函数。

在回调函数中，代码首先检查上传按钮是否被禁用或处于加载中的状态，如果是，则直接返回，不执行后续操作。接着，代码检查是否已选择要上传的文件，如果没有选择，则弹出一个提示框并返回，不执行后续操作。

如果文件已选择，则调用changeDisable函数，禁用上传按钮并显示加载中的状态。接着，代码创建一个名为formData的FormData对象，并将要上传的文件添加到其中。然后，代码使用instance.post方法将文件上传到服务器，并在上传成功后弹出一个提示框，显示上传成功的信息和访问资源的路径。如果上传失败，则弹出一个提示框，显示上传失败的信息。

最后，无论上传成功还是失败，代码都会调用clearHandle函数，清除已选择的文件信息，并调用changeDisable函数，恢复上传按钮的状态。

移除按钮的点击处理

这段代码实现了一个点击事件监听器，用于在用户点击移除按钮时清除已选择的文件信息。

具体来说，代码首先定义了一个名为clearHandle的函数，用于清除已选择的文件信息。这个函数将_file变量赋值为null，并将上传文件的提示信息显示出来，同时隐藏已选择的文件信息。

接下来，代码获取了一个名为upload_list的DOM元素，并为其添加了一个点击事件监听器。当用户点击这个元素时，会执行一个回调函数。

在回调函数中，代码首先获取了用户点击的元素，并将其赋值给一个名为target的变量。如果用户点击的是一个名为EM的元素，则说明用户点击的是移除按钮，此时会调用clearHandle函数，清除已选择的文件信息。

监听用户选择文件的操作

这段代码实现了一个监听器，用于在用户选择文件后获取文件信息并进行一些限制和操作。

具体来说，代码首先获取了一个名为upload_inp的DOM元素，并为其添加了一个change事件监听器。当用户选择文件后，会执行一个回调函数。

在回调函数中，代码首先通过upload_inp.files[0]获取用户选择的文件对象，并将其赋值给一个名为file的变量。如果用户没有选择文件，则直接返回，不执行后续操作。 输出file：

如果单独输出 console.log（upload_inp.files）： 它是一个集合，因为当前只选中一个文件，如果以后选择多个文件也可以实现；

接下来，代码对文件进行了两个限制：

如果文件符合限制条件，则将文件对象赋值给一个名为_file的变量。

最后，代码将上传文件的提示信息隐藏，并显示一个名为upload_list的元素，用于显示已选择的文件信息。这个元素的HTML内容是一个包含文件名和移除按钮的列表项。

点击选择文件按钮，触发上传文件INPUT框选择文件的行为

这段代码实现了一个点击事件监听器，当用户点击一个选择文件的按钮时，会触发上传文件的操作。

具体来说，代码首先获取了一个名为upload_button_select的DOM元素，并为其添加了一个点击事件监听器。当用户点击这个按钮时，会执行一个回调函数。

在回调函数中，代码首先检查upload_button_select元素是否包含disable或loading这两个CSS类名，如果包含，则直接返回，不执行后续操作。这个检查可能是为了避免用户在上传文件过程中重复点击按钮。

如果upload_button_select元素不包含这两个CSS类名，则会调用upload_inp.click()方法，触发一个名为upload_inp的上传文件的INPUT框的点击事件。这个INPUT框可能是一个隐藏的元素，用于选择要上传的文件。

创建文件并写入到指定的目录 & 返回客户端结果

后端接口

单文件上传处理「FORM-DATA」

这段代码实现了一个名为/upload_single的路由，用于处理单个文件上传的请求。当客户端向服务器发送POST请求时，服务器会调用这个路由来处理请求。

这个路由使用了multiparty模块来解析请求中的文件数据。multiparty是一个Node.js模块，用于处理multipart/form-data类型的数据， 这种数据通常用于文件上传。在这个路由中，我们使用multiparty_upload函数来解析请求中的文件数据。

multiparty_upload函数是一个异步函数，它接受两个参数：req和true。req是一个包含请求信息的对象，true表示使用流的方式上传文件。这个函数返回一个Promise对象，用于异步处理文件上传的过程。

在这个路由中，我们使用了async/await语法来处理异步操作。我们使用await关键字来等待multiparty_upload函数返回的Promise对象，然后将解析结果赋值给files变量。 files变量是一个包含上传文件信息的对象，其中file属性是一个数组，包含了上传的文件信息。

接着，我们从files对象中获取上传的文件信息，并将这些信息发送给客户端。我们使用响应对象res的send方法来发送响应，响应中包含了上传成功的信息和访问资源路径。

如果解析过程中出现错误，multiparty_upload函数会抛出一个错误，我们使用try/catch语句来捕获这个错误，并将错误信息发送给客户端。

总之，这段代码实现了一个简单的文件上传功能，使用了multiparty模块来解析文件数据，使用了async/await语法来处理异步操作，使用了try/catch语句来处理错误。

这段代码实现了一个名为/upload_single_name的路由，用于处理单个文件上传的请求，并指定了上传文件的文件名。当客户端向服务器发送POST请求时，服务器会调用这个路由来处理请求。

这个路由与之前的/upload_single路由相似，但是增加了一个filename字段，用于指定上传文件的文件名。在这个路由中，我们首先使用await multiparty_upload(req)来解析请求中的文件数据，然后从解析结果中获取上传的文件信息和指定的文件名。

接着，我们使用指定的文件名和上传目录的路径来构造上传文件的完整路径，并使用await exists(path)来检测该文件是否已经存在。如果文件已经存在，我们向客户端发送一个包含文件已经存在的信息的响应，并返回。如果文件不存在，我们调用writeFile函数来将上传的文件写入到指定的路径中，并向客户端发送一个包含上传成功的信息和访问资源路径的响应。

如果解析过程中出现错误，multiparty_upload函数会抛出一个错误，我们使用try/catch语句来捕获这个错误，并将错误信息发送给客户端。

实现了一个带有文件名的文件上传功能，使用了multiparty模块来解析文件数据，使用了async/await语法来处理异步操作，使用了try/catch语句来处理错误。

const changeBASE64 = (file) => {}

这段代码定义了一个名为 changeBASE64 的 JavaScript 函数，该函数接受一个参数 file（表示文件对象）。该函数的作用是将传入的文件对象转换为 BASE64 编码，并返回一个 Promise 对象。当文件读取并转换成功时，则通过 resolve 回调返回一个包含了文件内容的字符串形式的 BASE64 编码。

下面是每一步的详细解释：

const changeBASE64 = (file) => { 这行代码定义了一个名为 changeBASE64 的函数，并接受一个参数 file。该函数使用 ES6 的箭头函数语法声明。

return new Promise((resolve) => { 该行代码返回一个 Promise 对象，用于可以异步获取转换后的 BASE64 编码。resolve 参数是 Promise 中的回调函数，将在异步操作成功结束时被调用。

let fileReader = new FileReader(); 该行代码声明一个新的 FileReader 对象，用来读取文件。

fileReader.readAsDataURL(file); 该行代码使用 FileReader 的 readAsDataURL 方法，把文件内容读入内存，并将其转换为 Base64 格式。

fileReader.onload = (ev) => {resolve(ev.target.result);}; 该行代码监听 onload 事件，该事件在文件读取完成后被触发。在 onload 回调函数中，调用 resolve 函数，以传递读取到的文件数据（BASE64 编码）。

该段代码的作用是将传入的文件对象转换为 BASE64 编码，并使用 Promise 异步返回 BASE64 编码字符串。

upload_inp.addEventListener("change", async function () {}

这段代码监听了一个文件上传框（upload_inp）的 change 事件，当文件发生改变时（即用户选择了一个文件），则会开始执行以下步骤：

首先，函数会通过 upload_inp.files[0] 获取用户选中的文件，然后将这个文件存储到变量 file 中，接着定义两个额外的变量：BASE64 和 data，并将它们初始化为 undefined。

然后，代码会检查用户选中的文件是否为空。如果为空，则直接退出函数。如果文件存在，代码会检查这个文件的大小是否超过了 2MB，如果超过则通过 alert 函数警告用户，并退出函数。

如果用户选中的文件大小满足要求，则接下来会添加一个类名为 "loading" 的 class 到一个元素（upload_button_select）上，以显示“正在上传的状态”。

接下来，代码调用另一个异步函数 changeBASE64，该函数将文件转换为 BASE64 编码。函数使用 await 关键字等待该异步操作完成，并将结果存储在 BASE64 变量中。

在获取到 BASE64 编码后，代码会向服务器发送一个 HTTP POST 请求，传递编码后的文件内容、文件名等参数。请求的代码使用了 Axios 库，该库暴露了一个名为 instance 的请求实例。请求的 URL 是 "/upload_single_base64"，请求头部的 Content-Type 是 "application/x-www-form-urlencoded"。请求信息包括了文件的编码和文件名等参数。整个 HTTP 请求过程使用了 try...catch 语句捕获 HTTP 错误，如果成功则展示“上传成功”的提示窗口，否则展示“上传失败”的提示窗口。

不论 HTTP 请求成功与否，最终都会执行 finally 代码块中的代码，也就是通过 classList.remove 方法从 upload_button_select 元素上移除 "loading" 类，以结束“正在上传”的状态。

综上所述，该段代码的作用是实现了一个文件上传功能，其具体步骤包括检查文件大小、转换文件为 BASE64 编码、向服务器发送 HTTP POST 请求、显示上传结果的提示窗口等。

upload_button_select.addEventListener("click", function () {}

这段代码添加了一个事件监听器，当用户点击上传按钮(upload_button_select)时，会触发该监听器，执行以下步骤：

该函数的作用是检查上传按钮是否包含 "disable" 或 "loading" 类名，如果包含其中之一，则会立即返回（即不执行下面的上传操作）。

如果上传按钮没有 "disable" 或 "loading" 类名，则会使用 click 方法模拟触发 upload_inp（上传框）的点击事件，这样可以弹出文件选择器，用户便可选择要上传的文件。

该段代码的作用是实现一个按钮和上传框的联动，当用户点击上传按钮时，如果未处于“禁用”或“加载中”状态，则触发上传框的点击事件，弹出文件选择器以便用户选择要上传的文件。

后端接口

单文件上传处理「BASE64」

这段代码是一个服务器端路由处理程序，用于接收客户端的 POST 请求，并处理 BASE64 编码的文件上传。以下是对代码每一步的详细解释：

这段代码处理客户端的文件上传请求。它首先解析请求中的 BASE64 编码文件数据，计算文件的 MD5 值，并构建文件的存储路径。然后，它检测文件是否已经存在，如果存在则返回相应的信息，如果不存在则执行文件写入操作。最终，它发送相应的响应数据给客户端。

这段代码定义了一个名为 checkIsDisable 的 JavaScript 函数，该函数接受一个参数 element（表示 DOM 元素）。该函数的作用是检查该元素是否处于某些状态中，例如“禁用”或“加载中”。

下面是每一步的详细解释：

const checkIsDisable = (element) => { 这行代码定义了一个名为 checkIsDisable 的函数，并接受一个参数 element。该函数使用 ES6 的箭头函数语法声明。

let classList = element.classList; 该行代码将元素的 class 列表存储在 classList 变量中。classList 是元素的属性之一，它是一个只读属性，返回一个包含元素类名的 DOMTokenList 对象。

return classList.contains("disable") || classList.contains("loading"); 该行代码检查元素是否包含类名 "disable" 或 "loading"。如果是其中之一则返回 true，否则返回 false。

综上所述，checkIsDisable 函数的作用是传入一个 DOM 元素，检查该元素是否处于“禁用”或“加载中”等状态中，如果是其中之一则返回 true，否则返回 false。

这两个函数分别是将文件对象转换为 BASE64 编码和将文件对象转换为 ArrayBuffer，并计算文件的 MD5 哈希值的函数。

changeBASE64 函数的实现步骤如下：

return new Promise((resolve) => { ... }); 该行代码返回一个 Promise 对象，用来异步返回处理后的结果。

let fileReader = new FileReader(); 创建一个 FileReader 对象，用来读取文件对象的数据。

fileReader.readAsDataURL(file); 将文件对象读取为 BASE64 编码。

fileReader.onload = (ev) => { resolve(ev.target.result); }; 当文件读取完成后，将读取的结果作为 Promise 的返回值返回。

changeBuffer 函数的实现步骤如下：

return new Promise((resolve) => { ... }); 该行代码返回一个 Promise 对象，用来异步返回处理后的结果。

let fileReader = new FileReader(); 创建一个 FileReader 对象，用来读取文件对象的数据。

fileReader.readAsArrayBuffer(file); 将文件对象读取为 ArrayBuffer。

fileReader.onload = (ev) => { ... }; 当文件读取完成后，执行回调函数。

let buffer = ev.target.result, spark = new SparkMD5.ArrayBuffer(), HASH, suffix; 将读取的 ArrayBuffer 赋值给 buffer 变量，并创建一个 SparkMD5.ArrayBuffer 对象用于计算文件的 MD5 哈希值。同时定义 HASH、suffix 变量，用于存储文件的哈希值和后缀名。

spark.append(buffer); HASH = spark.end(); 将读取的 ArrayBuffer 数据添加到 SparkMD5 对象中，并计算文件的 MD5 哈希值。

suffix = /\.([a-zA-Z0-9]+)$/.exec(file.name)[1]; 使用正则表达式从文件名中提取出文件的后缀名，并将其赋值给 suffix 变量。

resolve({ buffer, HASH, suffix, filename: HASH.{HASH}.HASH.{suffix}, }); 将处理后的结果作为 Promise 的返回值返回，其中包括文件的 ArrayBuffer 数据、哈希值、后缀名以及新的文件名（由哈希值和后缀名组成）。

这部分代码包含了文件上传到服务器的逻辑。以下是对代码每一步的详细解释：

changeDisable 函数：

在上传按钮 (upload_button_upload) 上添加 "click" 事件监听器，并定义一个异步函数作为事件处理程序。

使用 checkIsDisable 函数检查上传按钮是否被禁用，如果被禁用，则返回并不执行后续操作。

检查 _file 变量是否存在，如果不存在则弹出警告提示用户选择要上传的文件，并返回。

调用 changeDisable(true) 禁用上传按钮，并显示加载状态。

调用 changeBuffer(_file) 函数获取文件的相关信息，其中包括文件名。

创建一个 FormData 对象 formData。

使用 formData.append 方法将文件对象 _file 和文件名 filename 添加到表单数据中。

使用 instance.post 方法发送 POST 请求到 "/upload_single_name" 路径，并传递表单数据 formData。

使用 Promise 的链式调用处理请求的响应数据。

如果响应的 data.code 为 0，表示文件上传成功，弹出成功提示，并返回。

如果 data.code 不为 0，则使用 Promise.reject 将 data.codeText 作为拒绝的理由抛出。

在链式调用的 catch 方法中捕获拒绝的理由，并弹出文件上传失败的提示。

在 finally 方法中，无论请求成功还是失败，都会执行以下操作：

这段代码实现了文件上传的功能。在点击上传按钮后，它首先禁用按钮并显示加载状态，然后获取文件的信息，构建表单数据并发送 POST 请求到服务器。根据服务器返回的响应结果，弹出相应的提示信息。最后，它恢复上传按钮的状态，清空选择的文件，并进行一些界面上的调整。

这段代码实现了文件上传的预览功能，即在用户选择文件后，将文件对象转换为 BASE64 编码，并将编码后的数据赋值给图片的 src 属性，从而实现文件预览的效果。

具体实现步骤如下：

upload_inp.addEventListener("change", async function () { ... }); 该行代码为文件上传按钮添加了一个 change 事件监听器，当用户选择文件后，该事件监听器会被触发。

let file = upload_inp.files[0], BASE64; 该行代码获取用户选择的文件对象，并定义一个变量 BASE64 用来存储文件对象转换后的 BASE64 编码。

if (!file) return; 如果用户没有选择文件，则直接返回，不进行后续的操作。

_file = file; 将选择的文件对象保存在一个全局变量 _file 中，以便后续操作使用。

upload_button_select.classList.add("disable"); 将上传按钮的样式设置为禁用状态，防止用户重复上传。

BASE64 = await changeBASE64(file); 调用 changeBASE64 函数将文件对象转换为 BASE64 编码，并使用 await 等待转换完成后将结果赋值给 BASE64 变量。

upload_abbre.style.display = "block"; 将文件预览区域的样式设置为显示状态。

upload_abbre_img.src = BASE64; 将文件预览区域中的图片的 src 属性设置为 BASE64 编码，从而实现文件预览的效果。

upload_button_select.classList.remove("disable"); 将上传按钮的样式设置为可用状态，以便用户进行下一次上传操作。

upload_button_select.addEventListener("click", function () { ... }); 该行代码为上传按钮添加了一个 click 事件监听器，当用户点击上传按钮时，该事件监听器会被触发。

if (checkIsDisable(this)) return; 如果上传按钮处于禁用状态，则直接返回，不进行后续的操作。

upload_inp.click(); 当用户点击上传按钮时，触发上传按钮的点击事件，从而弹出文件选择对话框，让用户选择要上传的文件。

这段代码实现了一个名为/upload_single_name的路由，用于处理单个文件上传的请求，并指定了上传文件的文件名。当客户端向服务器发送POST请求时，服务器会调用这个路由来处理请求。

这个路由与之前的/upload_single路由相似，但是增加了一个filename字段，用于指定上传文件的文件名。在这个路由中，我们首先使用await multiparty_upload(req)来解析请求中的文件数据，然后从解析结果中获取上传的文件信息和指定的文件名。

接着，我们使用指定的文件名和上传目录的路径来构造上传文件的完整路径，并使用await exists(path)来检测该文件是否已经存在。如果文件已经存在，我们向客户端发送一个包含文件已经存在的信息的响应，并返回。如果文件不存在，我们调用writeFile函数来将上传的文件写入到指定的路径中，并向客户端发送一个包含上传成功的信息和访问资源路径的响应。

如果解析过程中出现错误，multiparty_upload函数会抛出一个错误，我们使用try/catch语句来捕获这个错误，并将错误信息发送给客户端。

总之，这段代码实现了一个带有文件名的文件上传功能，使用了multiparty模块来解析文件数据，使用了async/await语法来处理异步操作，使用了try/catch语句来处理错误。

这段代码是一个事件处理程序，用于在文件选择框 (upload_inp) 的值发生变化时执行操作。下面是对代码每一步的详细解释：

在文件选择框上添加 "change" 事件监听器，并定义一个异步函数作为事件处理程序。

通过 upload_inp.files[0] 获取选择的文件对象，并将其赋值给变量 file。

如果 file 不存在（即用户没有选择文件），则直接返回，不执行后续操作。

给选择按钮添加 "loading" 类，以显示加载状态。

在 try 块中执行文件上传操作。

创建一个 FormData 对象，并将文件对象和文件名添加到 formData 中。

使用 instance.post 方法发送 POST 请求，将 formData 作为请求体发送到 "/upload_single" 路径。

在请求的配置项中，通过 onUploadProgress 属性指定一个回调函数，用于在文件上传过程中更新上传进度。

在回调函数中，通过事件对象 ev 获取已上传的字节数 loaded 和文件总字节数 total，计算出上传进度的百分比，并更新上传进度条的显示。

如果上传成功（即响应的 data.code 等于 0），则将上传进度设置为 100%（确保进度条显示完整），等待 300 毫秒（使用 delay 函数）后显示上传成功的提示信息。

如果上传失败，则抛出异常，并在 catch 块中处理异常，显示上传失败的提示信息。

无论上传成功还是失败，最后都执行 finally 块中的代码。

移除选择按钮的 "loading" 类，恢复按钮的状态。

隐藏上传进度条。

将上传进度条的宽度重置为 0%。

这段代码实现了文件上传的功能，并在上传过程中更新上传进度条的显示。如果上传成功，会显示上传成功的提示信息；如果上传失败，会显示上传失败的提示信息。最终，无论上传成功还是失败，都会重置按钮状态和上传进度条的显示。

这段代码实现了将多个文件上传到服务器的操作。下面是对代码每一步的详细解释：

定义了一个名为 changeDisable 的函数，用于在上传过程中禁用或启用按钮样式。

给上传按钮 (upload_button_upload) 添加 "click" 事件监听器，并定义一个函数作为事件处理程序。

检查上传按钮是否被禁用，如果是，则返回并不执行后续操作。

检查 _files 数组中是否有文件项，如果没有，则弹出提示框提示用户先选择要上传的文件，然后返回并不执行后续操作。

调用 changeDisable 函数并传入 true，禁用上传按钮。

使用 Array.from 方法将上传列表中的每个列表项转换为数组，存储在 upload_list_arr 变量中。

重构 _files 数组中的每个文件项，将其转换为一个 Promise 对象，该对象代表了文件的上传请求过程。

在每个上传请求的配置对象中，使用 onUploadProgress 回调函数来监视上传进度。该函数会获取当前上传进度并更新对应文件项的进度显示。

如果上传请求的响应数据中的 code 属性为 0，表示文件上传成功，将更新对应文件项的进度显示为 100%。

如果上传请求的响应数据中的 code 属性不为 0，表示文件上传失败，将返回一个被拒绝的 Promise 对象。

使用 Promise.all 方法等待所有文件上传请求的处理结果。

如果所有文件上传请求都成功完成，即所有 Promise 对象都被解析，则弹出提示框提示用户所有文件上传成功。

如果有任何一个文件上传请求失败，即存在被拒绝的 Promise 对象，则弹出提示框提示用户上传过程中出现问题。

无论上传成功还是失败，最后都调用 changeDisable 函数并传入 false，恢复上传按钮的样式。

将 _files 数组重置为空数组，清空上传列表的内容。

最后隐藏上传列表。

这段代码实现了多文件上传的功能，并显示了每个文件的上传进度。在所有文件上传请求完成后，会根据成功或失败的情况弹出相应的提示框，并对上传按钮和上传列表进行样式的处理。

这段代码基于事件委托实现了移除文件操作。下面是对代码每一步的详细解释：

给上传列表 (upload_list) 添加 "click" 事件监听器，并定义一个函数作为事件处理程序。

获取事件的目标元素 (target)，即用户点击的元素。

定义变量 curLi 并初始化为 null，用于存储当前点击的列表项。

定义变量 key，用于存储要移除的文件的唯一标识符。

如果目标元素的标签名 (tagName) 是 "EM"，表示用户点击的是移除按钮。

获取当前点击的列表项 (curLi)，通过访问父节点 (parentNode) 和祖父节点 (parentNode) 来获取正确的列表项元素。

如果当前列表项 (curLi) 不存在，则直接返回，不执行后续操作。

从上传列表 (upload_list) 中移除当前列表项 (curLi)。

获取当前列表项的唯一标识符 (key)，通过访问自定义属性 "key" 来获取。

使用 filter 方法从 _files 数组中过滤掉具有相同唯一标识符的文件对象。

如果经过过滤后的 _files 数组长度为 0，表示已经移除了所有文件项，则隐藏上传列表。

这段代码实现了基于事件委托的移除文件操作。当用户点击移除按钮时，会从上传列表中删除对应的文件项，并更新 _files 数组，以确保与列表项保持同步。如果所有文件项都被移除，上传列表将被隐藏。

这段代码实现了选择多个文件并展示在上传列表中的功能。下面是对代码每一步的详细解释：

定义了一个函数 createRandom，用于生成唯一值。它使用了当前时间戳与随机数的组合，并将结果转换为 16 进制字符串，去除小数点。

给上传文件输入框 (upload_inp) 添加 "change" 事件监听器，并定义一个异步函数作为事件处理程序。

使用 Array.from 方法将上传文件输入框中的文件转换为数组，并存储在 _files 变量中。

如果 _files 数组的长度为 0，则直接返回，不执行后续操作。

使用 map 方法遍历 _files 数组，为每个文件创建一个对象，包含 file、filename 和 key 三个属性。其中，file 属性存储文件对象，filename 属性存储文件名，key 属性存储通过 createRandom 函数生成的唯一值。

将处理后的文件对象数组重新赋值给 _files 变量。

构建上传列表的内容字符串 str。

使用 forEach 方法遍历 _files 数组，为每个文件创建一个列表项 (li)，其中设置 key 自定义属性为文件的唯一值，显示文件名和移除按钮。

将列表项的字符串拼接到 str 中。

将拼接好的列表项字符串设置为上传列表 (upload_list) 的 HTML 内容。

显示上传列表。

给选择按钮 (upload_button_select) 添加 "click" 事件监听器，并定义一个函数作为事件处理程序。

使用 checkIsDisable 函数检查选择按钮是否被禁用，如果被禁用，则直接返回，不执行后续操作。

触发上传文件输入框的点击事件，弹出文件选择对话框，让用户选择文件。

这段代码实现了选择多个文件后，将文件信息展示在上传列表中，并为每个文件生成唯一的标识符。用户可以通过点击移除按钮来删除对应的文件项。

这段代码定义了一个名为 uploadFile 的异步函数，用于实现文件上传操作。

函数接受一个 file 参数，表示要上传的文件对象。在函数内部，首先检查 isRun 变量，如果其值为 true，表示上传操作正在进行中，则直接返回，避免重复上传。然后将 upload_mark 元素的显示样式设置为 block，以显示上传进度标识。

接下来，通过 FormData 创建一个新的表单数据对象 fm，并使用 fm.append 方法将文件对象和文件名添加到表单数据中。

然后使用 instance.post 方法发送 POST 请求，将表单数据作为请求体发送到服务器的 /upload_single 路径。等待请求返回的数据 data。

如果返回的数据中的 code 属性为 0，表示文件上传成功，弹出提示框显示上传成功的信息，并结束函数执行。

如果返回的数据中的 code 属性不为 0，表示文件上传失败，抛出一个包含错误信息的异常。

无论文件上传成功还是失败，最后都会执行 finally 代码块中的逻辑，将 upload_mark 元素的显示样式设置为 none，以隐藏上传进度标识，并将 isRun 变量的值设为 false，表示上传操作已结束。

该函数用于封装文件上传的逻辑，通过 POST 请求将文件对象和文件名发送到服务器，并根据返回的结果显示相应的提示信息。

这段代码是用于实现拖拽文件上传的功能。我将逐步解释每一步的功能和细节。

首先，我们给上传区域（可能是一个DOM元素）绑定了几个事件，包括dragenter、dragleave、dragover和drop。

这段代码绑定了dragover事件，并阻止了默认的拖拽行为。当文件拖拽到上传区域时，浏览器默认会阻止文件的打开行为，所以我们需要阻止默认行为以允许文件拖拽进入。

这段代码绑定了drop事件，并阻止了默认的拖拽行为。当文件被释放到上传区域时，触发了drop事件。我们阻止了默认行为以防止浏览器打开文件。然后，我们使用ev.dataTransfer.files来获取拖拽的文件列表，这里我们只取第一个文件。如果没有拖拽文件，则直接返回。接下来，我们调用uploadFile函数，将拖拽的文件作为参数进行上传操作。

这样，当用户将文件拖拽到上传区域时，就会触发相应的事件，并调用uploadFile函数来处理文件上传操作。

手动实现上传

这段代码绑定了change事件，当用户选择文件后，会触发该事件。我们通过upload_inp.files[0]获取用户选择的文件，这里我们只取第一个文件。如果没有选择文件，则直接返回。然后，调用uploadFile函数，将选择的文件作为参数进行上传操作。

这段代码绑定了点击事件，当用户点击上传按钮时，会触发该事件。在事件处理函数中，我们模拟点击了隐藏的文件选择按钮upload_inp，通过调用upload_inp.click()来触发文件选择对话框，让用户手动选择文件。

通过以上代码，用户既可以通过手动选择文件按钮进行文件上传，也可以通过拖拽文件到上传区域来实现文件上传操作。无论是手动选择还是拖拽，最终都会调用uploadFile函数来处理文件上传操作。

该段代码为上传文件添加了切片上传的支持，并在上传完成后，将切片合并为完整的文件。

let { HASH, suffix } = await changeBuffer(file); 调用 changeBuffer 函数，获取文件的哈希值和后缀名。

data = await instance.get("/upload_already", { params: { HASH, }, }); 使用 axios 发送 GET 请求，获取已经上传的文件切片信息。

let max = 1024 * 100, count = Math.ceil(file.size / max), index = 0, chunks = []; 定义 max 变量为切片大小，count 变量为切片数量，index 变量为当前切片索引，chunks 变量为存储切片的数组。

if (count > 100) { max = file.size / 100; count = 100; } 如果切片数量超过 100，将切片大小设置为文件大小除以 100，并将切片数量设置为 100。

while (index < count) { ... } 使用循环将文件切片，并将每个切片对象添加到 chunks 数组中。

const clear = () => { ... }; const complate = async () => { ... }; 定义 clear 和 complate 函数，分别用于清除上传进度条和合并切片。

const complate = async () => {}

这段代码定义了一个名为complate的异步函数，用于处理切片上传完成的操作。这段代码负责管理切片上传的进度条，并在所有切片上传完成后发起切片合并请求，并根据合并结果进行处理。：

chunks.forEach((chunk) => {}

这段代码实现了将每个切片文件上传到服务器的过程。如果某个切片文件已经上传过，将跳过上传步骤。在每个切片上传完成后，会根据切片上传结果进行处理，成功则调用complate函数，失败则弹出提示框并调用clear函数清理状态。

合并上传的切片文件

这段代码实现了将上传的切片文件进行合并的功能。它首先检查切片文件是否已全部上传完成，然后按照文件名中的数字顺序进行排序，并将切片文件的内容追加到最终的合并文件中。合并完成后，删除切片文件及其存储目录，并返回合并后的文件路径和文件名。

总体来说，这段代码处理了上传切片文件的请求。它从请求中解析出文件信息，并根据切片文件的哈希值创建临时目录。然后将切片文件存储到临时目录中，如果文件已存在，则返回文件已存在的信息，如果文件不存在，则将文件写入临时目录并进行响应。

这段代码是用于处理合并切片的路由处理器。让我逐步解释每一步的功能：

总体来说，这段代码处理了合并切片文件的请求。它从请求中获取哈希值和切片数量，调用merge函数进行切片合并，并将合并结果通过响应对象进行返回。如果合并过程中出现错误，则发送包含错误信息的响应。

这段代码处理了获取已上传切片信息的请求。它从请求中获取哈希值，通过读取指定路径下的文件列表，并对文件列表按照切片序号进行排序，最后将切片信息通过响应对象进行返回。如果获取切片信息的过程中出现错误，则发送一个包含错误信息的响应。