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

netcore3.1 + vue (前后端分离) ElementUI多文件带参数上传的更多相关文章

  1. netcore3.1 + vue (前后端分离)Excel导入

    1.前端(vue)代码 2.公共类ExcelHelper 3.后端(netcore)代码 思路:导入类似于上传,将excel上传后将流转换为数据 1.前端(Vue)代码 这里使用的是ElementUI ...

  2. netcore3.1 + vue (前后端分离) IIS 部署

    1.安装 aspnetcore-runtime-3.1.1-win-x64.exe 2.安装dotnet-hosting-3.1.1-win.exe 3.安装urlrewrite和applicatio ...

  3. netcore3.1 + vue (前后端分离)生成PDF(多pdf合并)返回前端打印

    1.使用Adobe Acrobat XI Pro编辑pdf模板 2.公共类代码 3.service层调用 4.Controller层 5.前端(Vue) 因为print.js不支持宋体,所以打算用后台 ...

  4. SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题

    原文链接:https://segmentfault.com/a/1190000012879279 当前后端分离时,权限问题的处理也和我们传统的处理方式有一点差异.笔者前几天刚好在负责一个项目的权限管理 ...

  5. 解决Django+Vue前后端分离的跨域问题及关闭csrf验证

      前后端分离难免要接触到跨域问题,跨域的相关知识请参:跨域问题,解决之道   在Django和Vue前后端分离的时候也会遇到跨域的问题,因为刚刚接触Django还不太了解,今天花了好长的时间,查阅了 ...

  6. Flask + vue 前后端分离的 二手书App

    一个Flask + vue 前后端分离的 二手书App 效果展示: https://blog.csdn.net/qq_42239520/article/details/88534955 所用技术清单 ...

  7. 喜大普奔,两个开源的 Spring Boot + Vue 前后端分离项目可以在线体验了

    折腾了一周的域名备案昨天终于搞定了. 松哥第一时间想到赶紧把微人事和 V 部落部署上去,我知道很多小伙伴已经等不及了. 1. 也曾经上过线 其实这两个项目当时刚做好的时候,我就把它们部署到服务器上了, ...

  8. 两个开源的 Spring Boot + Vue 前后端分离项目

    折腾了一周的域名备案昨天终于搞定了. 松哥第一时间想到赶紧把微人事和 V 部落部署上去,我知道很多小伙伴已经等不及了. 1. 也曾经上过线 其实这两个项目当时刚做好的时候,我就把它们部署到服务器上了, ...

  9. beego-vue URL重定向(beego和vue前后端分离开发,beego承载vue前端分离页面部署)

    具体过程就不说,是搞这个的自然会动,只把关键代码贴出来. beego和vue前后端分离开发,beego承载vue前端分离页面部署 // landv.cnblogs.com //没有授权转载我的内容,再 ...

随机推荐

  1. Linux学习日记-WCF RestFul的部署(三)

    一.关于WCF 的部署 默认的wshttp风格的wcf是很容易部署上去的,但是这里给个建议尽量不要使用WCF的配置文件去部署尽管 我们都已经很熟悉了,在使用配置文件你会发现各种蛋疼的问题. 二.WCF ...

  2. netstat命令

    netstat命令会罗列出当前所有的网络连接.连接统计以及路由表信息.默认情况下,netstat命令将罗列出本地计算机所有开启的端口情况,以及它所连接的外部计算机情况. 端口就像一所房子的房门一样.数 ...

  3. 动态时间归整/规整/弯曲(Dynamic time warping,DTW)

    动态时间规整DTW   在日常的生活中我们最经常使用的距离毫无疑问应该是欧式距离,但是对于一些特殊情况,欧氏距离存在着其很明显的缺陷,比如说时间序列,举个比较简单的例子,序列A:1,1,1,10,2, ...

  4. python 中 reduce 函数的使用

    reduce()函数也是Python内置的一个高阶函数. reduce()函数接收的参数和 map()类似,一个函数 f,一个list,但行为和 map()不同,reduce()传入的函数 f 必须接 ...

  5. 爬坑!OpenCV打开双目摄像头

    1.首先找到双目摄像头的VideoCapture的设备号,记住定义时要采用降序的方法定义:cv::VideoCapture Rcap(1); cv::VideoCapture Lcap(0); 2.分 ...

  6. C#—ASP.NET:集成极光推送(Push API v3)

    C#—ASP.NET:集成极光推送(Push API v3) 原文地址: https://blog.csdn.net/CXLLLK/article/details/86489994   1.极光推送官 ...

  7. Python_collections_Counter计数器部分功能介绍

    counter():是对字典的补充,用来方便的计数,继承了字典 import collections obj = collections.Counter('yigbavfsdcfdsfdsd') pr ...

  8. easyui datagrid remoteSort的实现 Controllers编写动态的Lambda表达式 IQueryable OrderBy扩展

    EF 结合easy-ui datagrid 实现页面端排序 EF动态编写排序Lambda表达式 1.前端页面 var mainListHeight = $(window).height() - 20; ...

  9. Python GIL(Global Interpreter Lock)

    一.介绍 In CPython, the global interpreter lock, or GIL, is a mutex that prevents multiple native threa ...

  10. JSFL 禁止脚本运行时间太长的警告

    fl.showIdleMessage(false);