VUE、.NET多文件的上传、接收

上传、接收"/>

VUE、.NET多文件的上传、接收

.NET多文件接收

在.NET中文件的获取需要使用到IFormFile 接口，接口包括了几个方法和属性，我们需要使用到。

方法：

CopyTo(Stream)  将上传的文件的内容复制到流中。

OpenReadStream()  打开请求流以读取上传的文件。

属性：

ContentDisposition  获取已上传文件的原始 Content-Disposition 标头。

ContentType  获取已上传文件的原始 Content-Type 标头。

FileName  从 Content-Disposition 标头获取文件名。

Headers  获取已上传文件的标头字典。

Length  获取文件长度（以字节为单位）。

Name  从 Content-Disposition 标头获取表单字段名称。

首先我们需要创建一个类OeEntity。

public class OeEntity
{public List<IFormFile> Files { get; set; }
}

创建一个post请求接收一个OeEntity类。该请求将上传的文件全部保存到本地中，返回给前端保存的所有文件地址。

[HttpPost]
public object Cdd([FromForm] OeEntity m)
{if (m == null) return "上传内容错误";var files = m.Files;if (!files.Any()) return "没有检测到上传数据";var NewDate = DateTime.Now;try{var FilesPath = $"E:/warm/warm/public/File/{NewDate:yyyyMMdd}/";//创建储存文件if (!Directory.Exists(FilesPath)){Directory.CreateDirectory(FilesPath);}if (files != null){List<string> returnFile = new();foreach (var v in files){var fileExtension = Path.GetExtension(v.FileName);//获取文件格式，拓展名var saveFilesName = v.FileName.Substring(0, v.FileName.LastIndexOf('.')) + "_" + NewDate.ToString("HHmmss") + fileExtension;//文件名using (var fs = System.IO.File.Create(FilesPath + saveFilesName)){v.CopyTo(fs);fs.Flush();}var completeFilePath = Path.Combine(FilesPath, saveFilesName);returnFile.Add(completeFilePath);}return new { res = "上传成功", returnFile };}else{return new JsonResult(new { isSuccess = false, resultMsg = "上传失败，未检测上传的文件信息~" });}}catch (Exception ex){return new JsonResult(new { isSuccess = false, resultMsg = "文件保存失败，异常信息为：" + ex.Message });}
}

VUE多文件上传

window.event.preventDefault()避免刷新

我们需要使用FormData对象上传，将选择的文件内容循环压入到FormData中，需要注意请求头的配置。

methods: {onNewfile() {window.event.preventDefault()if (this.$refs.Newfile.files.length == 0) {console.log("请选择文件！！！")} else {let newFiles=new FormData();for(var i=0;i<this.$refs.Newfile.files.length;i++){newFiles.append('Files',this.$refs.Newfile.files[i])}PostBdd(newFiles).then(res=>{console.log(res)}).catch(err=>{console.log(err)})}}
}

axios配置（片段）

export function PostBdd(a) {return request({method: 'post',url: '/MyLogin/Cdd',headers: {// 'Content-Type': 'contentType:application/x-www-form-urlencoded''Content-Type': 'multipart/form-data'},data: a})
}

页面代码

<form id="onfiles"><input type="file" multiple="multiple" ref="Newfile" /><button @click="onNewfile">多文件上传</button>
</form>