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

单文件上传

.NET接收文件

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

方法：

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

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

属性：

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

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

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

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

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

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

 该post请求主要功能为文件上传成功返回前端保存文件的路径，并且将路径和文件名存储到数据库中，文件保存到本地。

[HttpPost]
public object Add()
{
    var formFile = Request.Form.Files[0];//获取请求发送过来的文件
    var currentDate = DateTime.Now;

    try
    {
        var filePath = $"E:/File/{currentDate:yyyyMMdd}/";

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

        if (formFile != null)
        {
            //文件后缀
            var fileExtension = Path.GetExtension(formFile.FileName);//获取文件格式，拓展名

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

            if (fileSize > 1024 * 1024 * 1) //10M TODO:(1mb=1024X1024b)
            {
                return new JsonResult(new { isSuccess = false, resultMsg = "上传的文件不能大于10M" });
            }

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

            //文件本地保存
            using (var fs = System.IO.File.Create(filePath + saveName))
            {
                formFile.CopyTo(fs);
                fs.Flush();
            }

            //完整的文件路径
            var completeFilePath = Path.Combine(filePath, saveName);
            Console.WriteLine(completeFilePath);
            
            using (Model.MyDbContext md = new Model.MyDbContext())//将信息保存到数据库中
            {
                Model.NewFile newFile = new Model.NewFile();
                newFile.FileName = completeFilePath;
                md.NewFiles.Add(newFile);
                md.SaveChanges();
            }


            return new JsonResult(new { isSuccess = true, returnMsg = "上传成功", completeFilePath = completeFilePath });
        }
        else
        {
            return new JsonResult(new { isSuccess = false, resultMsg = "上传失败，未检测上传的文件信息~" });
        }

    }
    catch (Exception ex)
    {
        return new JsonResult(new { isSuccess = false, resultMsg = "文件保存失败，异常信息为：" + ex.Message });
    }
}

VUE上传文件

前端上传时我们使用到了FormData上传文件，需要注意请求头的配置。

methods:{
	onfiles(){
		let a=new FormData();
		a.append('file',this.$refs.ipt.files[0])
		PostAdd(a).then(res=>{
			console.log(res)
		}).catch(err=>{
			console.log(err)
		})
	}
}

 前端界面

<div id="Login">
	<from id="imgname">
		<input type="file" name="imgfile" ref="ipt" />
		<button @click="onfiles">单文件上传</button>
	</from>
</div>

axios配置（片段）

export function PostAdd(a){
	return request({
		method:'post',
				url:'/Add',
				headers: {'Content-Type': 'multipart/form-data'},
				data:a
	})
}