FineUploader 文件上传组件配置选项详解

宣利权Counsellor

于 2025-06-05 09:06:52 发布

阅读量232

点赞数 3

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_00265/article/details/148441093

FineUploader 文件上传组件配置选项详解

fine-uploader Multiple file upload plugin with image previews, drag and drop, progress bars. S3 and Azure support, image scaling, form support, chunking, resume, pause, and tons of other features. 项目地址: https://gitcode.com/gh_mirrors/fi/fine-uploader

前言

FineUploader 是一个功能强大的文件上传 JavaScript 库，提供了丰富的配置选项来满足各种上传场景的需求。本文将深入讲解 FineUploader 的核心配置选项，帮助开发者快速掌握其配置方法。

基础配置选项

上传端点配置

FineUploader 最基础的配置是设置上传端点，即指定文件上传到服务器的地址：

var uploader = new qq.FineUploader({
    request: {
        endpoint: '/uploads'  // 服务器端上传处理接口
    }
});

这个端点可以是绝对路径或相对路径，具体取决于你的服务器架构。对于传统上传方式，这个路径对应服务器上处理上传请求的接口。

调试模式

在开发阶段，启用调试模式非常有用：

var uploader = new qq.FineUploader({
    debug: true,  // 开启调试模式
    request: {
        endpoint: '/uploads'
    }
});

启用后，FineUploader 会在浏览器控制台输出详细的日志信息，帮助开发者诊断问题。建议在开发环境中始终开启此选项。

高级功能配置

自动重试机制

网络环境不稳定时，上传可能会失败。FineUploader 提供了自动重试功能：

var uploader = new qq.FineUploader({
    request: {
        endpoint: '/uploads'
    },
    retry: {
       enableAuto: true  // 启用自动重试
    }
});

当上传失败时，FineUploader 会自动尝试重新上传文件，提高上传成功率。

文件删除功能

文件上传后，用户可能需要删除已上传的文件：

var uploader = new qq.FineUploader({
    request: {
        endpoint: '/uploads'
    },
    deleteFile: {
        enabled: true,  // 启用删除功能
        endpoint: '/my/delete/endpoint'  // 删除请求的服务器端点
    }
});

启用此功能后，在 UI 模式下，成功上传的文件旁边会显示删除按钮。FineUploader 支持通过 POST、DELETE 方法发送删除请求，并支持跨域删除。

完整配置示例

下面是一个完整的 FineUploader 配置示例，包含了上述所有功能：

<html>
  <head>
      <link href="fine-uploader.css" rel="stylesheet"/>
  </head>
  <body>
    <div id="fine-uploader"></div>
    
    <script src="fine-uploader.min.js"></script>
    
    <!-- 模板代码省略... -->
    
    <script>
        var uploader = new qq.FineUploader({
            debug: true,
            element: document.getElementById('fine-uploader'),
            request: {
                endpoint: '/uploads'
            },
            deleteFile: {
                enabled: true,
                endpoint: '/uploads'
            },
            retry: {
               enableAuto: true
            }
        });
    </script>
  </body>
</html>