JS - 文件上传组件WebUploader使用详解5（添加自定义参数）

2019-01-21 发布：hangge 阅读：3012

WebUploader 是使用 Form 表单的方式上传文件，上传时还会携带有如下参数一起提交：

name：文件名
size：文件大小
type：文件类型
lastModifiedDate：文件最后修改时间
chunks：分片总数（如果开启分片上传的话）
chunk：当前分片索引（如果开启分片上传的话）

但有时这些参数还不能够满足我们的需要，如果想要额外附带上一些自定义的参数（比如文章 id），通常有如下 3 种方法。

1，初始化的时候直接添加参数

//初始化Web Uploader
var uploader = WebUploader.create({
    // swf文件路径
    swf: 'webuploader/Uploader.swf',
    // 文件接收服务端。
    server: 'http://www.hangge.com/upload.php',
    // 上传时添加自定义参数
    formData: {
        articleId: 111
    },
    // 选择文件的按钮。可选。
    // 内部根据当前运行是创建，可能是input元素，也可能是flash.
    pick: '#picker'
});

2，初始化后再添加参数

即在 WebUploader 初始化后，uploader.upload() 方法调用前添加参数，效果和上面一样。

// 上传时添加自定义参数
uploader.options.formData.articleId = 111;

3，在 uploadBeforeSend 事件响应方法中添加参数

这种方式适合对不同的文件单独设置不同的参数。

uploader.on( 'uploadBeforeSend', function( block, data ) {
    var file = block.file;
    console.log("当前文件id", file.id);
    console.log("当前文件名", file.name);
    // 上传时添加自定义参数
    data.articleId= 111;
},2);