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

页面代码

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