最近做上傳模塊中用到了批量相冊管理，使用了iView中的相冊組件，組件文檔地址：https://www.iviewui.com/components/upload

先上個效果圖

主要遇到的難點是對應文檔中的參數不知道如何寫，在群裏熱心人幫助後解決了。具體實現是這樣的，默認上傳直接記錄到數據庫中，日誌添加更新圖片記錄中的日誌編號字段。刪除的時候是當點擊保存後，將刪除的編號由後臺處理，刪除圖片、刪除圖片數據庫記錄。上傳圖片時附帶頁面驗證隱藏域參數，下面附上代碼，純當記錄。

   <div id="app">
                            <div class="demo-upload-list" v-for="item in uploadList">
                                <template v-if="item.status === ‘finished‘">
                                    <img :src="item.url">
                                    <div class="demo-upload-list-cover">
                                        <icon type="ios-eye-outline" @@click.native="handleView(item.url)"></icon>
                                        <icon type="ios-trash-outline" @@click.native="handleRemove(item)"></icon>
                                    </div>
                                </template>
                                <template v-else>
                                    <i-progress v-if="item.showProgress" :percent="item.percentage" hide-info></i-progress>
                                </template>
                            </div>
                            <upload ref="upload"
                                    :show-upload-list="false"
                                    :default-file-list="defaultList"
                                    :on-success="handleSuccess"
                                    :format="[‘jpg‘,‘jpeg‘,‘png‘]"
                                    :max-size="2048"
                                    :on-format-error="handleFormatError"
                                    :on-exceeded-size="handleMaxSize"
                                    :before-upload="handleBeforeUpload"
                                    :data="{‘ProjectInfID‘:projectInfID, ‘ProjectLogID‘:projectLogId, ‘__RequestVerificationToken‘:token}"
                                    multiple
                                    type="drag"
                                    name="fileBefore"
                                    action="/ProjectBudget/ProjectLog/UploadPic"
                                    style="display: inline-block;width:58px;">
                                <div style="width: 58px;height:58px;line-height: 58px;">
                                    <icon type="camera" size="20"></icon>
                                </div>
                            </upload>
                            <modal title="照片查看" v-model="visible">
                                <a :href="imgName" target="_blank"><img :src="imgName" v-if="visible" style="width: 100%"></a>
                            </modal>
                        </div>

var token = $("input[name=‘__RequestVerificationToken‘]").val();
        //初始化vue相冊，作業前
        var Main = {
            data() {
                return {
                    defaultList: jsonBefore,
                    projectInfID: ProjectInfID,
                    projectLogId: keyValue,
                    token: token,
                    imgName: 
 
‘‘,
                    visible: false,
                    uploadList: []
                }
            },
            methods: {
                handleView(url) {
                    this.imgName = url;
                    this.visible = true;
                },
                handleRemove(file) {
                    deletePicID 
 
+= file.name + ‘,‘;
                    const fileList = this.$refs.upload.fileList;
                    this.$refs.upload.fileList.splice(fileList.indexOf(file), 1);
                },
                handleSuccess(res, file) {
                    file.url = res.message.split(‘|‘)[0];
                    file.name = res.message.split(‘|‘)[1];
                },
                handleFormatError(file) {
                    this.$Notice.warning({
                        title: ‘圖片文件格式不正確‘,
                        desc: ‘不允許上傳格式：‘ + file.name + ‘的圖片,請上傳格式為：jpg 或者 png。‘
                    });
                },
                handleMaxSize(file) {
                    this.$Notice.warning({
                        title: ‘圖片超過允許的大小‘,
                        desc: ‘文件  ‘ + file.name + ‘ 超過2M的限制大小。‘
                    });
                },
                handleBeforeUpload() {
                    const check = this.uploadList.length < 10;
                    if (!check) {
                        this.$Notice.warning({
                            title: ‘最多只能上傳10張圖片。‘
                        });
                    }
                    return check;
                }
            },
            mounted() {
                this.uploadList = this.$refs.upload.fileList;
            }
        }
        var Component = Vue.extend(Main)
        new Component().$mount(‘#app‘)

 [HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult UploadPic(HttpPostedFileBase fileBefore, HttpPostedFileBase fileAfter, string ProjectInfID, string ProjectLogID)
        {
            if (fileBefore != null)
            {
                if (!string.Empty.Equals(fileBefore.FileName))
                {
                    var fileName = string.Format("{0:yyyyMMddHHmmss}", DateTime.Now) + ".jpg";
                    UploadPic(fileBefore, fileName);
                    //保存信息
                    var TempEntity = new ProjectPicEntity();
                    TempEntity.PicAddress = "/Resource/ProjectLog/" + fileName;
                    TempEntity.PicStyle = (int)ProgressPicStyle.作業前;
                    TempEntity.ProjectLogID = ProjectLogID;
                    TempEntity.ProjectInfID = ProjectInfID;
                    string TempId = "";
                    if (projectPicApp.AddForm(TempEntity, out TempId) == true)
                    {
                        return Success("/Resource/ProjectLog/" + fileName + "|" + TempId);
                    }
                    else
                    {
                        return Error("上傳失敗");
                    }
                }
            }
            if (fileAfter != null)
            {
                if (!string.Empty.Equals(fileAfter.FileName))
                {
                    var fileName = string.Format("{0:yyyyMMddHHmmss}", DateTime.Now) + ".jpg";
                    UploadPic(fileAfter, fileName);
                    //保存信息
                    var TempEntity = new ProjectPicEntity();
                    TempEntity.PicAddress = "/Resource/ProjectLog/" + fileName;
                    TempEntity.PicStyle = (int)ProgressPicStyle.作業後;
                    TempEntity.ProjectLogID = ProjectLogID;
                    TempEntity.ProjectInfID = ProjectInfID;
                    string TempId = "";
                    if (projectPicApp.AddForm(TempEntity, out TempId) == true)
                    {
                        return Success("/Resource/ProjectLog/" + fileName + "|" + TempId);
                    }
                    else
                    {
                        return Error("上傳失敗");
                    }
                }
            }
            return Error("上傳失敗");
        }

  public bool UploadPic(HttpPostedFileBase file, string fileName)
        {
            if (file == null)
            {
                return false;
            }
            try
            {
                var filePath = Server.MapPath("~/Resource/ProjectLog/");
                if (!Directory.Exists(filePath))
                {
                    Directory.CreateDirectory(filePath);
                }
                string TempPath = Path.Combine(filePath, fileName);
                file.SaveAs(TempPath);
                //檢查圖片是否超出最大尺寸、裁切
                Thumbnail.MakeThumbnailImage(TempPath, TempPath, 800, 800);
                //添加時間文字水印
                WaterMark.AddImageSignText(TempPath, TempPath, string.Format("{0:yyyy-MM-dd HH:mm:ss}", DateTime.Now), 9, 80, "Tahoma", 14);
            }
            catch (Exception ex)
            {
                Log logHelper = LogFactory.GetLogger(this.GetType().ToString());
                logHelper.Error(string.Format("{0:yyyy-MM-dd HH:mm:ss}", DateTime.Now) + " 上傳圖片發生異常——" + ex.ToString() + "\r\n\r\n\r\n");
                return false;
            }
            return true;
        }

.NET MVC 中使用iView上傳組建