Plupload設置自定義參數

在HTML 5比較流行的當下，Plupload是文件上傳的不二之選，特別是Adobe宣布2020年將停止對Flash的更新支持。本文記錄一下如何在上傳文件的時候，傳遞自定義參數。

了解到兩種方式，一種是通過 setOption 方法，一種是直接操作對象。

uploader.setOption("multipart_params", {
    "post_id"    : 1,
    "post_author" : 2
})

uploader.settings.multipart_params.test_id = 2;
uploader.settings.multipart_params.test_author = "Wang";

參數通過POST請求發送到后端，后台可以根據實際情況獲取。

較為完整的代碼如下：

var uploader = new plupload.Uploader({
    browse_button : 'rs-uploader',
    url : '/manage/upload',
    chunk_size : '1mb',
    //multipart : true,
    multi_selection : false,
    filters : {
        max_file_size : '10mb',
            mime_types: [
                {title : "Image files", extensions : "jpg,gif,png"},
                {title : "Zip files", extensions : "zip"}
            ]
    },
    flash_swf_url : '../js/Moxie.swf',
    silverlight_xap_url : '../js/Moxie.xap',
    preinit : {
            Init: function(up, info) {
                //console.log('[Init]', 'Info:', info, 'Features:', up.features);
            },
 
            UploadFile: function(up, file) {
                //console.log('[UploadFile]', file);
            }
        },
    init : {
        BeforeUpload: function(up, file) {
            console.log('[BeforeUpload]', 'File: ', file);

            //設置參數
            uploader.setOption("multipart_params", {
                "post_id"    : 1,
                "post_author" : 2
            });

            uploader.settings.multipart_params.test_id = 2;
            uploader.settings.multipart_params.test_author = "Wang";
        },
        FilesAdded: function(up, files) {
                // Called when files are added to queue
                console.log('[FilesAdded]');
 
                plupload.each(files, function(file) {
                    console.log('  File:', file);
                });

            uploader.start();
         }
    }
});

uploader.init();
});

plupload 提供了四個控制請求的參數，包括 headers、multipart、multipart_params、max_retries，前三個都是用來傳遞參數的，但是因為前兩個對於 html4 及 flash 的支持問題，我覺得還是使用 multipart_params 比較好。本文使用的 plupload 版本為 2.3.1。

參考資料：
1、前端上傳組件Plupload使用指南
2、plupload 設置自定多參數
3、使用plupload實現多文件上傳，自定義參數