为了方便后期调用Alist进行文件上传，特地将一篇往期文章的JS部分封装成了CDN库。
项目开源地址
话不多说，直接上示例。
CDN引入，快捷调用示例（HTML）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>简单示例-AlistUploaderJS</title>
<!-- CDN引入 -->
<script src="https://testingcf.jsdelivr.net/gh/4444TENSEI/AlistUploaderJS@0.1.3/npm/alist-uploader.js"></script>
</head>
<body>
<input type="file" id="fileInput" multiple />
<button type="button" onclick="uploadFiles()">上传</button>
<script>
const alistUploaderOptions = new AlistUploader({
// [必须]你的Alist服务地址
baseUrl: "https://alist.example.com",
// [必须]Alist账号
username: "admin",
// [必须]Alist密码
password: "123456",
// [必须]上传到哪个目录，例如要传到"https://alist.example.com/webdav"，则照下方填写
uploadRootFolder: "webdav",
// [可选]上传并发数量, 默认值为 1。
concurrency: 3,
// [可选]为每次上传自动创建以时间命名(14位数字)的文件夹, 可选, 默认值为 false。
createTimestampFolder: true,
// [可选]控制台调试开关, 默认值为 false。
debug: true,
// [可选]版本号信息输出开关, 默认值为 true。
showVersionInfo: true,
// [可选]上传类型, 默认值为 "stream"也就是流式传输, 也可设置为"form"表单方式。
uploadMethod: "stream",
});
// 上传按钮
function uploadFiles() {
const files = document.getElementById("fileInput").files;
alistUploaderOptions.on("complete", (allSuccess) => {
alert(allSuccess ? "所有文件上传完成！" : "部分文件上传失败。");
});
alistUploaderOptions.uploadFiles(files).catch((error) => {
console.error("上传出错:", error);
});
}
</script>
</body>
</html>