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; } }