前言
本文包含.NET Core、.NET Framework、及Web前端、三端的文件上传代码,是全网最全面的文件上传知识总结。
指定文件参数名(.Net Core)
代码
[HttpPost("UploaFile")]
public async Task UploadFileAsync(IEnumerable<IFormFile> files)
{
//获取上传的文件之一
var file1 = files.FirstOrDefault();
//获取文件名
var file1Name = file1.FileName;
//获取文件流。后续就能进行读取、保存、等文件操作了
var file1Stream = file1.OpenReadStream();
}
调用示例
![f5a6a8519e9ca2b238c485a1e09ed91e.png](https://img-blog.csdnimg.cn/img_convert/f5a6a8519e9ca2b238c485a1e09ed91e.png)
这里有一个需要注意的地方,就是上传文件的参数名,需要跟接口的入参名一致,也就是 files,我们使用的类型为 IEnumerable< IFormFile>,主要是 IFormFile 这个,因为我们上传的文件可能不止一个,所以这里使用了集合,要是不喜欢 IEnumerable,换成 List 也是可以的;
不指定文件参数名(.Net Core)
而在实际开发中,我们可能会碰到前端不配合,或者参数名改来改去,我们后端又不想频繁更改,那怎么办呢,此时我们可以使用以下的方法。
代码
[HttpPost("UploaFile")]
public async Task UploadFileAsync()
{
//获取上传的文件之一
var file1 = HttpContext.Request.Form.Files.FirstOrDefault();
//获取文件名
var file1Name = file1.FileName;
//获取文件流。后续就能进行读取、保存、等文件操作了
var file1Stream = file1.OpenReadStream();
}
混合(.Net Core)
而同样是一个POST请求,自然是可以通过url,route,from这些传参啦!
代码
[HttpPost("{method}/{value}/UploaFile")]
public async Task<Dictionary< string, object >> UploadFileAsync(
[FromRoute] Parameter route,
[FromQuery] Parameter query,
[FromForm] Parameter form,
IEnumerable<IFormFile> files)
{
}
示例
![ff0e2614ba7fedf62496bfbf076f1d66.png](https://img-blog.csdnimg.cn/img_convert/ff0e2614ba7fedf62496bfbf076f1d66.png)
.Net Framework中的文件上传
与.Net Core所用方法稍有不同
代码
//获取上传的文件之一
var file1 = context.Request.Files[0];
//获取文件名
var file1Name = file1.FileName;
//获取文件流。后续就能进行读取、保存、等文件操作了
var file1Stream = file1.InputStream;
Web前端的处理方式
下面给出Javascript与Vue两种文文件上传方式。
JavaScript 方式
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="lib/jquery/dist/jquery.js"></script>
<script>
$(document).ready(function () {
$("#btn_fileUpload").click(function () {
var fileUpload = $("#files").get(0);
var files = fileUpload.files;
var data = new FormData();
for (var i = 0; i < files.length; i++) {
data.append(files[i].name, files[i]);
}
$.ajax({
type: "POST",
url: 'http://localhost:55084/single_upload_avatar',
contentType: false,
processData: false,
data: data,
success: function (data) {
console.log(JSON.stringify(data));
},
error: function () {
console.log(JSON.stringify(data));
}
});
});
})
//前端第一种提交方式
function uplpadfile() {
//获取表单的数据
var formdata
var file = $("#files").get(0);
var files = file.files;
var formdata = new FormData();
for (var i = 0; i < files.length; i++) {
formdata.append("files", files[i]);
}
$.ajax({
type: 'Post',
data: formdata,
contentType: false,
processData: false,
url: "http://localhost:55084/upload_avatar",
success: function (result) {
if (result.Success) {
} else {
alert('提交失败,重新尝试提交');
}
}
})
};
</script>
</head>
<body>
<h3>1、ajax上传</h3>
<form enctype="multipart/form-data">
<input type="file" id="files" name="files" placeholder="file" multiple>
<input type="button" id="btn_fileUpload" value="提交">
</form>
<br /><br /><br />
<h3>2</h3>
<form enctype="multipart/form-data">
<input type="file" name="files" id="files" value="选择需要上传的文件" multiple />
<input type="button" value="提交" onclick="uplpadfile()">
</form>
<br /><br /><br />
<h3>3、form 表单标签 submit 上传</h3>
<h6>表单提交上传 通过IFormFile参数获取上传文件信息</h6>
<h6>AJAX请求上传,通过Request.Form.Files获取上传文件信息</h6>
<form method="post" enctype="multipart/form-data" action="/batch_upload_avatar">
<div class="form-group">
<div class="col-md-10">
<p>Upload one or more files using this form:</p>
<input type="file" id="files" name="files" multiple />
</div>
</div>
<div class="form-group">
<div class="col-md-10">
<input type="submit" value="服务器方式上传" />
</div>
</div>
</form>
</body>
</html>
Vue el-upload 方式
代码
<template>
<el-upload
class="avatar-uploader"
action="http://localhost:60548/api/v1.0/users/upload_avatar"
:headers="token"
:data="{ user_code: 666 }"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload">
<img v-if="imageUrl" :src="imageUrl" class="avatar" />
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</template>
<script>
import { getToken } from "@/utils/auth";
export default {
data() {
return {
token: { Authorization: `Bearer ${getToken()}` }
};
},
};
</script>
<style>
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409eff;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
line-height: 178px;
text-align: center;
}
.avatar {
width: 178px;
height: 178px;
display: block;
}
</style>
<script>
export default {
data() {
return {
imageUrl: "",
};
},
methods: {
handleAvatarSuccess(res, file) {
this.imageUrl = URL.createObjectURL(file.raw);
},
beforeAvatarUpload(file) {
const isLt2M = file.size / 1024 / 1024 < 2;
return isLt2M;
},
},
};
</script>