摘要：然鵝，因?yàn)槭且蟼鞯狡吲?，遇到了跨域的問題，嘗試過網(wǎng)上的幾種解決方法，都沒用。一開始以為是一下子上傳太多張的緣故，就把改為，然鵝還是會(huì)報(bào)錯(cuò)。。。

其實(shí)用這個(gè)組件之前，原先是想接著用webuploader的，畢竟用過了，比較熟悉，而且也很好用。然鵝，因?yàn)槭且蟼鞯狡吲＃龅搅丝缬虻膯栴}，嘗試過網(wǎng)上的幾種解決方法，都沒用。只好用七牛文檔里面的plupload，hhhhhh，官方文檔推薦的，總歸不會(huì)有什么問題~其實(shí)這篇文章咧，不是純粹的怎么用plupload，會(huì)有一部分邏輯處理（腦子實(shí)在不好用，怕忘記了到時(shí)候還要重新想一遍邏輯，想想還是記下來吧）

https://developer.qiniu.com/k... 這個(gè)是七牛官網(wǎng)Javascript SDK的文檔，項(xiàng)目過程中遇到的問題，也都是直接翻文檔。因?yàn)橛玫膒lupload，有些參數(shù)七牛的文檔沒那么詳細(xì)，http://www.cnblogs.com/2050/p... 這個(gè)鏈接是從七牛官網(wǎng)跳轉(zhuǎn)過去的~很詳細(xì)。由于官方文檔已經(jīng)寫得很詳細(xì)，這邊就不過多的介紹參數(shù)、方法啥的，把項(xiàng)目中有注意到的參數(shù)、遇到的問題及解決方法整理一下。

大致過程是這樣的

可以去github上面下載SDK源碼，也可以通過NPM或者Bower安裝。（官網(wǎng)有安裝教程）

把js文件引入，我是用plupload.full.min.js、moxie.min.js、qiniu.min.js、Moxie.swf

因?yàn)槭乔岸说年P(guān)系，七牛的賬號(hào)密碼，包括token、下載資源用的bucket域名等這些是后臺(tái)的小伙伴提供的，在用到圖片上傳之前，先通過后臺(tái)小伙伴提供的接口請(qǐng)求七牛的token

接下去就可以寫代碼啦（貼完代碼發(fā)現(xiàn)自己寫了好一些邏輯處理，趕緊跳上來先把一些可以分享的東西寫到上面來）

auto_start：是否自動(dòng)上傳，一般單圖片上傳的話，我會(huì)設(shè)會(huì)true，并且在FileUploaded事件中獲取到圖片的地址后，在頁面中顯示預(yù)覽。多圖片的話，就設(shè)為false，等到提交時(shí)，調(diào)用start方法一起上傳，比如imgUploader.start()，上傳的時(shí)間會(huì)久一點(diǎn)，但是不會(huì)有很多無用的圖片占用存儲(chǔ)空間（這也是項(xiàng)目中的需求啦）

在項(xiàng)目中，有多個(gè)地方用到單圖片上傳，我就把上傳封裝在一個(gè)方法中，這樣可能會(huì)想要重寫某個(gè)事件，可以通過綁定該事件實(shí)現(xiàn)，比如imgUploader.bind("FileUploaded", function (up, file, info) {));

在多圖片上傳的過程中，經(jīng)常會(huì)出現(xiàn)http error.的錯(cuò)誤，但是單圖片從來不會(huì)。一開始以為是一下子上傳太多張的緣故，就把a(bǔ)uto_start改為true，然鵝還是會(huì)報(bào)錯(cuò)。。。
我抱著天無絕人之路盯著chrome開發(fā)者工具中的network看了好久，發(fā)現(xiàn)報(bào)http error的IP都是同一個(gè)！??！我就打開qiniu.js拿了上傳域名中的http://up.qiniu.com去解析，發(fā)現(xiàn)真有那個(gè)IP，再然后，我把http://up-z2.qiniu.com全部換成http://upload-z2.qiniu.com，就可以了~由于不知道為什么會(huì)這樣，所以只能說如果有遇到跟我一樣的問題可以試試看，不保證有用~hhhhh

還有一個(gè)問題昂，順便提一下，項(xiàng)目中，我有使用requirejs，因?yàn)閜lupload和qiniu.js這些不是按AMD或者CMD啥的規(guī)范組織的，做了一下處理，大約長這樣

shim: {
    "moxie": {
        deps: ["jquery"]
    },
    "plupload": {
        exports: "plupload"
    },
    "Qiniu": {
        deps: ["plupload"],
        exports: "Qiniu"
    }
}

單圖片上傳沒啥好說的，直接上多圖片上傳的代碼

// 界面的上傳按鈕和圖片列表

    

    
    

    
        上傳圖片
    
    

// js
var imgUploader, // 上傳對(duì)象
    uploadStoreImgUrl = [], // 當(dāng)前圖片列表（在編輯的情況下，圖片列表可能不會(huì)為空，這個(gè)變量也是作為表單上傳中圖片列表的參數(shù)）
    uploadSuccessList = [],  // 圖片上傳成功后返回的列表
    fileNameList = []; // 添加圖片后的隊(duì)列
$.ajax({
    url: "api/qiniu/token", // 獲取七牛token的url（這個(gè)是后臺(tái)給的）
    method: "GET",
    success: function (data) {
        imgUploader = Qiniu.uploader({
            runtimes: "html5,flash,html4", // 上傳模式，依次退化
            browse_button: "uploadShopPic", // 上傳選擇的點(diǎn)選按鈕，必需
            container: "uploaderShopContainer", // 上傳區(qū)域DOM ID，默認(rèn)是browser_button的父元素
            flash_swf_url: "../vendor/js/plupload/Moxie.swf",
            dragdrop: false,
            auto_start: false, // 選擇文件后自動(dòng)上傳，若關(guān)閉需要自己綁定事件觸發(fā)上傳
            multi_selection: true,
            unique_names: true,
            max_retries: 0,  // 上傳失敗最大重試次數(shù)
            save_key: false,
            uptoken:data.token, // 這個(gè)就是請(qǐng)求返回的七牛token啦
            uptoken_url:"api/qiniu/token",
            domain: "", // bucket域名，下載資源時(shí)用到，必需
            chunk_size: "4mb",                  // 分塊上傳時(shí)，每塊的體積
            resize:true,
            filters : { // 限制上傳的文件類型、大小等
                mime_types: [{title : "Image files", extensions:"jpg,gif,png"}]
                },
           init: {
               "FilesAdded": function(up, files) {
               // 因?yàn)樾枨笾羞@個(gè)圖片列表最多只能有10張，判斷是否超過，超過的則移除
                var count = files.length + uploadStoreImgUrl.length + fileNameList.length;
                if (files.length > 10 && (uploadStoreImgUrl.length+fileNameList.length) == 0) {
                    var addLength = files.length;
                    for (var i = addLength - 1; i > addLength-1; i--) {
                        imgUploader.removeFile(files[i].id);
                        files.splice(i, 1);
                    }
                }
                if (count > 10) {
                    var addFile = files.length - (count - 10) - 1, tempLength = files.length;
                    for (var m = tempLength-1; m > addFile; m--) {
                        imgUploader.removeFile(files[m].id);
                        files.splice(m, 1);
                    }
                }
                plupload.each(files, function(file) {

                    // 文件添加進(jìn)隊(duì)列后,處理相關(guān)的事情
                    // 上傳前預(yù)覽
                    var isAdd = true;
                    // 先判斷要上傳的圖片是否重復(fù)
                    for (var i = 0; i < fileNameList.length; i++) {
                        if (file.name == fileNameList[i]) {
                            isAdd = false;
                            return false;
                        }
                    }
                    // 如果不是重復(fù)的，則添加到上傳隊(duì)列，并且在頁面預(yù)覽
                    if (isAdd) {
                        fileNameList.push(file.name);
                        var preloader = new mOxie.Image();
                        preloader.onload = function() {
                        preloader.downsize( 100, 100);
                        var imgItem = "";
                        var liCont = "
"+imgItem+"
";
                        $("#shopPicList").append(liCont);
                    };
                    preloader.load(file.getSource());
                }
            });

        },
        "BeforeUpload": function(up, file) {
            // 每個(gè)文件上傳前,處理相關(guān)的事情
        },
        "UploadProgress": function(up, file) {
            // 每個(gè)文件上傳時(shí),處理相關(guān)的事情
         },
        "FileUploaded": function(up, file, info) {
            // 上傳成功后，返回圖片路徑，domain就是上面的domain參
             var domain = up.getOption("domain");
             var res = "";
             if (typeof(info) == "string") {
                 res = $.parseJSON(info);
             } else {
                 res = info.response;
                 if (typeof(res) == "string") {
                     res = $.parseJSON(res);
                 }
             }
             uploadStoreImgUrl.push(domain + res.key);
             uploadSuccessList.push(res.key);
        },
        "Error": function(up, file, err, errTip) {
            base.hideLoading();
            //上傳出錯(cuò)時(shí),處理相關(guān)的事情
            if (file.code=="-600"){
                base.showAlertDialog("上傳圖片的大小不能超過10mb！");
            } else if (file.code=="-601"){
                base.showAlertDialog("上傳圖片的格式有誤！")
            } else {
                base.showAlertDialog(err);
            }
        },
        "UploadComplete": function(files) {
            //隊(duì)列文件處理完畢后,處理相關(guān)的事情
            // 如果上傳成功返回的圖片個(gè)數(shù)和隊(duì)列中的圖片個(gè)數(shù)一樣，則所有圖片上傳成功
            if (uploadSuccessList.length == fileNameList.length) {
                
            }

        },
        "Key": function(up, file) {
            // 若想在前端對(duì)每個(gè)文件的key進(jìn)行個(gè)性化處理，可以配置該函數(shù)
            // 該配置必須要在 unique_names: false , save_key: false 時(shí)才生效
            var timestamp = Date.parse(new Date());
            var key = "data/car/web/uuid/"+file.name+"/"+timestamp;
            // do something with key
            return key;
        }
    }
});}});

        // 這個(gè)是刪除的邏輯判斷
        $("body").on("click", ".close-icon", function () {
            var id = $(this).siblings(".pic-thumbnail").attr("id");
            var name = $(this).siblings(".pic-thumbnail").attr("name");
            var liIndex = $(this).parent().index();
            // var uploadImgList = uploadStoreImgUrl.split(",");
            // uploadStoreImgUrl = "";
            if (liIndex < uploadStoreImgUrl.length) {
                uploadStoreImgUrl.splice(liIndex,1);
            }
            
            $(this).parent().remove();
            if (!(id == undefined || id == "undefined")) {
                storeImgObj.removeFile(id);
                $.each(fileNameList, function(index,item){
                    // index是索引值（即下標(biāo)）   item是每次遍歷得到的值；
                    if(item == name){
                        fileNameList.splice(index,1);
                    }
                });
            }
        });

以上代碼有很多邏輯處理，可以忽略。關(guān)鍵步驟都有添加注釋，大致流程就是，
在圖片添加到上傳隊(duì)列之前，先判斷加了這些圖片是否超過了圖片的限制數(shù)量（比如10張），如果超過，則移除多余的（預(yù)覽圖片上面有刪除按鈕，可以刪掉，再添加寄幾想要的圖片），如果圖片有重復(fù)的，重復(fù)的也不添加，做完這些處理后，將圖片添加到上傳隊(duì)列中。
等表單提交時(shí)，觸發(fā)圖片上傳，把上傳成功后返回的圖片路徑添加到圖片成功列表和作為表單圖片列表參數(shù)的列表，如果圖片成功列表和圖片隊(duì)列中的圖片數(shù)量一致，則提交表單。
刪除的話，作為表單參數(shù)的列表中的圖片地址和隊(duì)列中的圖片地址也要?jiǎng)h除。

好吧。講真，我太啰嗦了。。。= =