其他分享
首页 > 其他分享> > netcore3.1+vue ElementUI多文件带参数上传

netcore3.1+vue ElementUI多文件带参数上传

作者:互联网

 

 

vue前端代码

前端主要使用了ElementUI的el-uploda插件,除去业务代码需要注意的是使用formdata存储片上传时所需的参数

      <el-upload
        class="upload-demo"
        multiple
        ref="upload"
        action="#"
        accept=".jpg,.tif"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :before-upload="handleBefore"
        :http-request="handleHttpRequest"
        :on-change="handleChange"
        :file-list="fileList"
        :auto-upload="false">
        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
        <el-button
          style="margin-left: 10px; margin-right: 20px"
          size="small"
          type="success"
          @click="handleUpload">上传到服务器</el-button>
 </el-upload>

data(){
    fileList: [], // 上传文件列表
}

methods:{
    //上传前回调
      handleBefore: function (file) {
        //  this.picData={
        //    name:file.name,
        //    picType:0
        //  }
      },
      // 覆盖默认的上传行为,可以自定义上传的实现
      handleHttpRequest: function (para) {},
      // 文件列表移除文件时的钩子
      handleRemove: function (file, fileList) {
        // console.log(file, fileList);
      },
      handleChange(file, fileList) {
        this.fileList = fileList;
      },
      //上传到服务器
      handleUpload() {
        if (this.selectPicType !== null && this.fileList.length>0) {
          let _this = this;
//使用formdata添加上传时所带参数 let formData = new FormData(); let data = []; let imageType = true; let selectDocument = this.selectDocumentType=="第一部分" ? 0 : this.selectDocumentType=="第二部分" ? 1 : this.selectDocumentType=="第三部分" ? 2 : ""; if(this.selectPicType == 2 && this.selectDocumentType=='') { this.$message({ type:'error', message: '请选择目录!' }) return; } this.fileList.forEach((item) => { var imgName = new RegExp(/^\d+\.(jpg|tif)$/); if(!(imgName.test(item.name))) { imageType = false; } formData.append("files", item.raw); data.push({ VId: this.fuId, //退役军人个人信息id DId: this.currenttMaterialId, //目录材料id ServerPathId: 1, BackUpPathId: 1, PicName: item.name, picType: this.selectPicType, //上传类型 TextType: selectDocument, //正文中的目录 ReelNumber: this.fuReelNumber, //上传卷号 VName: this.fuVName, //退役军人姓名 ArchivesYear: this.fuarchivesYear //年度 }); }); if(imageType == false) { this.$message({ type: 'error', message: '请选择名称为数字的文件,并且是jpg和tif格式' }) this.fileList = []; return; } else if (imageType == true) { formData.append("params",JSON.stringify( data)); multiFileUpload(formData).then((res) => { this.getCurrentList(); this.$message({ type:"success", message: "上传成功" }) this.catalog = false; this.inputShow = false; this.fileList = []; this.selectPicType = null; this.selectDocumentType = ''; selectDocument = ''; this.currenttMaterialId = null; }); } } else { this.$message({ type:"error", message: "选择文件和要上传图片的类型!" }) } }, // 点击文件列表中已上传的文件时的钩子 handlePreview: function (file) { // console.log(file); } }

 

后端代码

后台使用Request.Form来接收参数,把图片上传的信息存到出数据库

 

        /// <summary>
        ///  多文件上传
        /// </summary>
        /// <param name="formCollection">表单集合值</param>
        /// <returns>服务器存储的文件信息</returns>

        [HttpPost]
        public  JsonResult MultiFileUpload(IFormCollection formCollection)
        {
            var currentDate = DateTime.Now;
            //var webRootPath = _hostingEnvironment.WebRootPath;//>>>相当于HttpContext.Current.Server.MapPath("") 
            //var webRootPath = _hostingEnvironment.ContentRootPath;//>>>相当于HttpContext.Current.Server.MapPath("") 
            var uploadFileRequestList = new List<UploadFileRequest>();
            var jsondata = Request.Form["params"];
            //var UploadPicDTOs = (List<UploadPicDTO>)JsonConvert.DeserializeObject(jsondata,typeof( List< UploadPicDTO >));
            var UploadPicDTOs = JsonConvert.DeserializeObject<List<UploadPicDTO>>(jsondata);
            var insertPicData = new List<TBase_ImgDetailInfo>();
           
            try
            {
                //FormCollection转化为FormFileCollection
                var files = (FormFileCollection)formCollection.Files;


                if (files.Any())
                {
                    foreach (var file in files)
                    {
                        string filePath = string.Empty;
                        var uploadFileRequest = new UploadFileRequest();
                        var picData = UploadPicDTOs.FirstOrDefault(s => s.PicName == file.FileName);
                        var webRootPath = _tImgServerPathService.QueryById(picData.ServerPathId).Result.ServerPath;

                        if (picData.PicType == 0 || picData.PicType == 1 || picData.PicType == 3)
                            filePath = $"\\{picData.ArchivesYear}\\{picData.ReelNumber}-{picData.VName}\\";
                        else
                            filePath = $"\\{picData.ArchivesYear}\\{picData.ReelNumber}-{picData.VName}\\{picData.TextType + 1}\\";


                        //创建每日存储文件夹
                        if (!Directory.Exists(webRootPath + filePath))
                        {
                            Directory.CreateDirectory(webRootPath + filePath);
                        }

                        //文件后缀
                        var fileExtension = Path.GetExtension(file.FileName);//获取文件格式,拓展名

                        //判断文件大小
                        var fileSize = file.Length;

                        if (fileSize > 1024 * 1024 * 10) //10M TODO:(1mb=1024X1024b)
                        {
                            continue;
                        }

                        //保存的文件名称(以名称和保存时间命名)
                        var saveName = file.FileName.Substring(0, file.FileName.LastIndexOf('.')) + "_" + currentDate.ToString("yyyyMMddHHmmss") + fileExtension;
                        string fullPath = webRootPath + filePath + saveName;

                        //文件保存
                        using (var fs = System.IO.File.Create(fullPath))
                        {
                            file.CopyTo(fs);
                            fs.Flush();
                        }

                        //完整的文件路径
                        var completeFilePath = Path.Combine(filePath, saveName);

                        uploadFileRequestList.Add(new UploadFileRequest()
                        {
                            FileName = saveName,
                            FilePath = completeFilePath
                        });
                        insertPicData.Add(new TBase_ImgDetailInfo()
                        {
                            VId = picData.VId,
                            DId = picData.DId,
                            ServerPathId = picData.ServerPathId,
                            BackUpPathId = picData.BackUpPathId,
                            PicName = picData.PicName,
                            PicRealName=saveName,
                            RelativePath = filePath,
                            //FullPath= fullPath,
                            PicType = picData.PicType,
                            TextType = picData.TextType,
                            ArchivesYear = picData.ArchivesYear,
                            PicPageNo= int.Parse(file.FileName.Substring(0, file.FileName.LastIndexOf('.'))),
                            CreateId = _user.ID,
                            CreateBy = _user.Name
                        });
                    }
                }
                else
                {
                    return new JsonResult(new { isSuccess = false, resultMsg = "上传失败,未检测上传的文件信息~" });
                }
            }
            catch (Exception ex)
            {
                return new JsonResult(new { isSuccess = false, resultMsg = "文件保存失败,异常信息为:" + ex.Message });
            }

            if (uploadFileRequestList.Any())
            {
                _tImgDetailInfoService.Add(insertPicData);
                return new JsonResult(new { isSuccess = true, returnMsg = "上传成功", filePathArray = uploadFileRequestList });
            }
            else
            {
                return new JsonResult(new { isSuccess = false, resultMsg = "网络打瞌睡了,文件保存失败" });
            }
        }


    /// <summary>
    /// 对文件上传响应模型
    /// </summary>
    public class UploadFileRequest
    {
        /// <summary>
        /// 文件名称
        /// </summary>
        public string FileName { get; set; }


        /// <summary>
        /// 文件路径
        /// </summary>
        public string FilePath { get; set; }
    }

 

标签:vue,picData,ElementUI,fileList,file,var,new,上传,netcore3.1
来源: https://www.cnblogs.com/pengboke/p/14373388.html