单文件上传
.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
})
}