npm 包 ddv-upload-api 使用教程-JavaScript中文网-JavaScript教程资源分享门户

介绍

ddv-upload-api 是一个基于 Node.js 的 npm 包，提供了文件上传相关的 API。它帮助我们在前端开发中轻松处理文件上传，并且具有高度的可定制性和扩展性。

安装

在使用 ddv-upload-api 之前，我们需要先安装它，使用 npm 安装：

npm install ddv-upload-api --save

使用

ddv-upload-api 的使用非常简单，我们只需要引入它并实例化即可。

const ddvUploadApi = require('ddv-upload-api');
const uploadApi = ddvUploadApi({
   // 配置项
});

配置项

ddv-upload-api 提供了以下配置选项：

uploadDir：指定上传文件的存放目录，默认值为 os.tmpdir() + '/node-upload'。
autoCreateDir：当上传目录不存在时，是否自动创建，默认值为 true。
maxFileSize：上传文件大小限制，单位为字节，默认值为 1024 * 1024 * 100，即 100MB。
maxFiles：上传文件数量限制，默认值为 undefined，即不限制。

文件上传

使用 upload 方法上传文件，它返回一个 Promise。

const path = require('path');
const fs = require('fs');
const filePath = path.join(__dirname, 'test.txt');
const file = fs.createReadStream(filePath);
const uploaded = await uploadApi.upload(file, 'test.txt');

upload 方法的第一个参数是一个可读流，第二个参数是上传后的文件名，上传完成后会返回一个对象，其中包含上传后的文件路径等信息。

取消上传

ddv-upload-api 支持取消上传，我们可以使用 cancel 方法来取消正在进行的上传。

const cancelToken = uploadApi.createCancelToken();
const uploading = uploadApi.upload(file, 'test.txt', {
    cancelToken
});
uploadApi.cancel(cancelToken);

createCancelToken 方法会返回一个取消 token，我们可以将它传递给 upload 方法中的 options 对象以取消上传。同时，我们也可以将这个 token 传给其他需要在上传过程中取消的地方，比如请求网络。

事件监听

ddv-upload-api 提供了两个事件来监听上传过程，分别是 progress 和 success。

const uploading = uploadApi.upload(file, 'test.txt');
uploading.on('progress', e => {
   console.log(`已上传 ${e.loaded}，总大小为 ${e.total}`);
});
uploading.on('success', uploaded => {
   console.log('上传成功', uploaded);
});

progress 事件会在上传过程中不断触发，包含上传进度等信息；success 事件会在上传成功后触发，携带上传文件信息。

示例代码

-- -------------------- ---- -------
----- ------------ - --------------------------
----- ---- - ----------------
----- -- - --------------

----- --------- - -------------------- -----------
----- --------- - --------------
    ----------
    -------------- -----
    ------------ ---- - ---- - ----
    --------- ---------
---

----- -------- - -------------------- ------------
----- ---- - ------------------------------

----- --------- - ---------------------- ------------

------------------------ - -- -
    ---------------- ---------------- -------------
---

----------------------- -------- -- -
    ------------------- ----------
---

----- ----------- - ------------------------------
---------------------- ----------- -
    -----------
---

------------------------------

总结

ddv-upload-api 提供了一组简单易用、灵活可扩展的文件上传 API，为我们解决了前端文件上传方面的诸多痛点。使用 ddv-upload-api 可以使文件上传变得更加容易和高效。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/60056ce781e8991b448e69d3