编程语言
首页 > 编程语言> > ASP.NET MVC + Element el-upload 多文件上传

ASP.NET MVC + Element el-upload 多文件上传

作者:互联网

环境:Visual Studio 2015,.NET Framework 4.5.2,ASP.NET MVC5,Vue.js,Element UI


本文主要介绍基于element的el-upload的两种批量上传文件的方法

1、el-upload原生的批量上传操作,这种方法是一个文件对应一个HTTP请求

2、在el-upload的基础上,用Ajax+FormData一个HTTP请求上传多个文件


1、el-upload批量上传文件

在el-upload控件添加multiple属性

<el-upload class="upload-demo"
        action="UploadFile"
        :on-preview="handlePreview"
        :on-remove="(file, fileList) => {handleRemove(file, fileList, 'DEImage')}"
        :before-remove="beforeRemove"
        :limit="50"
        :on-exceed="handleExceed"
        :on-success="(response, file, fileList) => {handleSuccess(response, file, fileList, 'DEImage',0)}"
        :file-list="filelistPCBAImage" style="float:left;" :disabled="IsReadonly" multiple>
     <el-button size="small" type="primary" v-if="!IsReadonly">点击上传</el-button>
</el-upload>

 因为是el-upload批量上传是一个一个上传,所以上传成功的回调函数要把返回的数据保存起来。保存返回数据的数组不能跟file-list的一致,否则会报错

                handleSuccess: function (response, file, fileList, attaType, index) {
                    if (this.ReBuyOffForm[attaType]) {
                        this.ReBuyOffForm[attaType].push({ name: response.Data.Name, url: response.Data.Url });
                    } else {
                        this.ReBuyOffForm[attaType] = [{ name: response.Data.Name, url: response.Data.Url }];
                    }
                },

 删除上传文件的时候,要注意区分数据库读出来的文件(pThis.filelistPCBAImage)和新上传的文件(pThis.ReBuyOffForm[attaType]),因为他们保存在不同的地方,所以删除的时候要注意这个问题,保存表单的时候也要记得把他们合起来。

                handleRemove: function (file, fileList, attaType) {
                    var pThis = this;
                    var path = file.info ? file.info.url : file.url;
                    var action = jp.createRpc('DeleteFile');
                    action({ Path: path })
                        .done(function (data) {
                            pThis.$message({
                                message: pThis.$t('lpa.msg.OperationComplete'),
                                type: 'success'
                            });
                            //删掉上传的文件
                            for (var i = 0; i < pThis.ReBuyOffForm[attaType].length; i++) {
                                if (pThis.ReBuyOffForm[attaType][i].url == path) {
                                    pThis.ReBuyOffForm[attaType].splice(pThis.ReBuyOffForm[attaType].indexOf(pThis.ReBuyOffForm[attaType][i]), 1);
                                }
                            }
                            //这个地方如果直接删除file-list绑定的数组元素,会对新上传的文件有影响
                            for (var i = 0; i < pThis.filelistPCBAImage.length; i++) {
                                if (pThis.filelistPCBAImage[i].url == path) {
                                    pThis.filelistPCBAImage[i].status = "delete";
                                }
                            }
                        });
                },

后台Action不需要参数,直接在HTTP上下文里面拿

        [HttpPost]
        public virtual JsonResult UploadFile()
        {
            HttpPostedFileBase file = Request.Files[0];
            string directoryPath = ConfigurationManager.AppSettings["UploadPath"] + "/" + DateTime.Now.ToString("yyyy-MM-dd") + "/";
            if (!System.IO.Directory.Exists(AppDomain.CurrentDomain.BaseDirectory + directoryPath))
            {
                System.IO.Directory.CreateDirectory(AppDomain.CurrentDomain.BaseDirectory + directoryPath);
            }

            var strExt = System.IO.Path.GetExtension(file.FileName);
            var strGuidName = CommonLibrary.Helpers.GUID.Create();
            string strRealName = strGuidName + strExt;
            string savePath = AppDomain.CurrentDomain.BaseDirectory + directoryPath + strRealName;
            file.SaveAs(savePath);
            return CustomJson(new { Url = directoryPath + strRealName, Name = file.FileName });
        }

 


2、AJAX一个HTTP请求批量上传文件

element的el-upload是一个一个的往后台发请求上传文件的,就是说你选N个文件就会发起N个HTTP请求。

如果想要一个请求把所有的文件都上传到服务器,需要用ajax手动批量上传文件。

实现代码也很简单,创建一个FormData,利用el-upload的http-request事件把文件加到FormData,用ajax把FormData提交到服务器,后台Action直接在HTTP上下文就能拿到FormData数据。

具体参照代码

--------------------

下面是el-upload控件属性设置

<el-upload class="upload-demo"
            ref="upload"
            action="aaa"
            :on-preview="handlePreview"
            :on-remove="(file, fileList) => {handleRemove(file, fileList, 'FilmImage')}"
            :before-remove="beforeRemove"
            :limit="50"
            :on-exceed="handleExceed"
            :http-request="uploadFilmImageFile"
            :auto-upload="false"
            :file-list="ReBuyOffForm.FilmImage" style="float:left;" :disabled="IsReadonly" multiple>
       <el-button size="small" type="primary" style="float:left;" v-if="!IsReadonly">选择文件</el-button>
       <el-button size="small" type="success" @@click="submitFilmImageUpload" v-if="!IsReadonly">上传到服务器</el-button>
</el-upload>

el-upload控件的事件处理代码 ,submitFilmImageUpload就是上传文件事件,注意ajax的参数

                handlePreview: function (file) {
                    window.open("@ViewBag.SiteUrl" + "/" + (file.info ? file.info.url : file.url));
                },
                handleExceed: function (files, fileList) {
                    this.$message.warning(`当前限制选择 1 个文件,本次选择了 ${files.length} 个文件,共选择了 ${files.length + fileList.length} 个文件`);
                },
                beforeRemove: function (file, fileList) {
                    return this.$confirm(`确定移除 ${file.name}?`);
                },
                uploadFilmImageFile: function (file) {
                    this.FilmImageFileData.append("file-" + file.file.name, file.file);
                },
                submitFilmImageUpload: function () {
                    this.FilmImageFileData = new FormData();
                    this.$refs.upload.submit();
                    var pThis = this;
                    $.ajax({
                        type: "post",
                        url: '@Url.Action("BatchUploadFile")',
                        data: this.FilmImageFileData,
                        dataType: "json",
                        processData: false,
                        contentType: false,
                        success: function (result) {
                            if (result.Data && result.Data.length > 0) {
                                for (var i = 0; i < result.Data.length; i++) {
                                    pThis.ReBuyOffForm.FilmImage.push({ name: result.Data[i].Name, url: result.Data[i].Url })
                                }
                            }
                        },
                        error: function (e) {
                            console.log(e);
                        }
                    });
                },
                
                handleRemove: function (file, fileList, attaType) {
                    var pThis = this;
                    var path = file.info ? file.info.url : file.url;
                    var action = jp.createRpc('DeleteFile');
                    action({ Path: path })
                        .done(function (data) {
                            pThis.$message({
                                message: pThis.$t('lpa.msg.OperationComplete'),
                                type: 'success'
                            });
                            for (var i = 0; i < pThis.ReBuyOffForm[attaType].length; i++) {
                                if (pThis.ReBuyOffForm[attaType][i].url == path) {
                                    pThis.ReBuyOffForm[attaType].splice(pThis.ReBuyOffForm[attaType].indexOf(pThis.ReBuyOffForm[attaType][i]), 1);
                                }
                            }
                        });
                },

 Action里面通过Request.Files能拿到上传的文件集合,然后把文件保存起来,用一个数组把文件信息返回给前端

        [HttpPost]
        public virtual JsonResult BatchUploadFile()
        {
            var uploadFiles = Request.Files;
            string directoryPath = ConfigurationManager.AppSettings["UploadPath"] + "/" + DateTime.Now.ToString("yyyy-MM-dd") + "/";
            if (!System.IO.Directory.Exists(AppDomain.CurrentDomain.BaseDirectory + directoryPath))
            {
                System.IO.Directory.CreateDirectory(AppDomain.CurrentDomain.BaseDirectory + directoryPath);
            }

            JArray array = new JArray();
            foreach (string uploadFile in uploadFiles)
            {
                HttpPostedFileBase file = Request.Files[uploadFile] as HttpPostedFileBase;
                var strExt = System.IO.Path.GetExtension(file.FileName);
                var strGuidName = CommonLibrary.Helpers.GUID.Create();
                string strRealName = strGuidName + strExt;
                string savePath = AppDomain.CurrentDomain.BaseDirectory + directoryPath + strRealName;
                file.SaveAs(savePath);
                array.Add(JObject.FromObject(new { Url = directoryPath + strRealName, Name = file.FileName }));
            }
            return CustomJson(array);
        }

 

标签:el,ReBuyOffForm,ASP,attaType,upload,file,var,pThis,上传
来源: https://blog.csdn.net/u012835032/article/details/111885123