摘要：然鵝，因為是要上傳到七牛，遇到了跨域的問題，嘗試過網上的幾種解決方法，都沒用。一開始以為是一下子上傳太多張的緣故，就把改為，然鵝還是會報錯。。。

其實用這個組件之前，原先是想接著用webuploader的，畢竟用過了，比較熟悉，而且也很好用。然鵝，因為是要上傳到七牛，遇到了跨域的問題，嘗試過網上的幾種解決方法，都沒用。只好用七牛文檔里面的plupload，hhhhhh，官方文檔推薦的，總歸不會有什么問題~其實這篇文章咧，不是純粹的怎么用plupload，會有一部分邏輯處理（腦子實在不好用，怕忘記了到時候還要重新想一遍邏輯，想想還是記下來吧）

https://developer.qiniu.com/k... 這個是七牛官網Javascript SDK的文檔，項目過程中遇到的問題，也都是直接翻文檔。因為用的plupload，有些參數七牛的文檔沒那么詳細，http://www.cnblogs.com/2050/p... 這個鏈接是從七牛官網跳轉過去的~很詳細。由于官方文檔已經寫得很詳細，這邊就不過多的介紹參數、方法啥的，把項目中有注意到的參數、遇到的問題及解決方法整理一下。

大致過程是這樣的

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

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

因為是前端的關系，七牛的賬號密碼，包括token、下載資源用的bucket域名等這些是后臺的小伙伴提供的，在用到圖片上傳之前，先通過后臺小伙伴提供的接口請求七牛的token

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

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

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

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

還有一個問題昂，順便提一下，項目中，我有使用requirejs，因為plupload和qiniu.js這些不是按AMD或者CMD啥的規范組織的，做了一下處理，大約長這樣

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

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

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

    

    
    

    
        上傳圖片
    
    

// js
var imgUploader, // 上傳對象
    uploadStoreImgUrl = [], // 當前圖片列表（在編輯的情況下，圖片列表可能不會為空，這個變量也是作為表單上傳中圖片列表的參數）
    uploadSuccessList = [],  // 圖片上傳成功后返回的列表
    fileNameList = []; // 添加圖片后的隊列
$.ajax({
    url: "api/qiniu/token", // 獲取七牛token的url（這個是后臺給的）
    method: "GET",
    success: function (data) {
        imgUploader = Qiniu.uploader({
            runtimes: "html5,flash,html4", // 上傳模式，依次退化
            browse_button: "uploadShopPic", // 上傳選擇的點選按鈕，必需
            container: "uploaderShopContainer", // 上傳區域DOM ID，默認是browser_button的父元素
            flash_swf_url: "../vendor/js/plupload/Moxie.swf",
            dragdrop: false,
            auto_start: false, // 選擇文件后自動上傳，若關閉需要自己綁定事件觸發上傳
            multi_selection: true,
            unique_names: true,
            max_retries: 0,  // 上傳失敗最大重試次數
            save_key: false,
            uptoken:data.token, // 這個就是請求返回的七牛token啦
            uptoken_url:"api/qiniu/token",
            domain: "", // bucket域名，下載資源時用到，必需
            chunk_size: "4mb",                  // 分塊上傳時，每塊的體積
            resize:true,
            filters : { // 限制上傳的文件類型、大小等
                mime_types: [{title : "Image files", extensions:"jpg,gif,png"}]
                },
           init: {
               "FilesAdded": function(up, files) {
               // 因為需求中這個圖片列表最多只能有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) {

                    // 文件添加進隊列后,處理相關的事情
                    // 上傳前預覽
                    var isAdd = true;
                    // 先判斷要上傳的圖片是否重復
                    for (var i = 0; i < fileNameList.length; i++) {
                        if (file.name == fileNameList[i]) {
                            isAdd = false;
                            return false;
                        }
                    }
                    // 如果不是重復的，則添加到上傳隊列，并且在頁面預覽
                    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) {
            // 每個文件上傳前,處理相關的事情
        },
        "UploadProgress": function(up, file) {
            // 每個文件上傳時,處理相關的事情
         },
        "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();
            //上傳出錯時,處理相關的事情
            if (file.code=="-600"){
                base.showAlertDialog("上傳圖片的大小不能超過10mb！");
            } else if (file.code=="-601"){
                base.showAlertDialog("上傳圖片的格式有誤！")
            } else {
                base.showAlertDialog(err);
            }
        },
        "UploadComplete": function(files) {
            //隊列文件處理完畢后,處理相關的事情
            // 如果上傳成功返回的圖片個數和隊列中的圖片個數一樣，則所有圖片上傳成功
            if (uploadSuccessList.length == fileNameList.length) {
                
            }

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

        // 這個是刪除的邏輯判斷
        $("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是索引值（即下標）   item是每次遍歷得到的值；
                    if(item == name){
                        fileNameList.splice(index,1);
                    }
                });
            }
        });

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

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