文件上传和下载
1、单文件上传
后端代码:
[HttpPost("/upload2")]
public string UploadFile2([FromForm] IFormFile file)
{
if (file != null)
{
var fileDir = "D://picture/";
if (!Directory.Exists(fileDir))
{
Directory.CreateDirectory(fileDir);
}
//上传的文件的路径
string filePath = fileDir +file.FileName;
using (var fs = System.IO.File.Create(filePath))
{
file.CopyTo(fs);
}
return "上传成功";
}
else
{
return "上传失败";
}
}
或者通过 Request.Form.Files[0]获取到文件对象
[HttpPost("/upload2")]
public string UploadFile2()
{
var file = Request.Form.Files[0];
}
前端代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue3</title>
<script src="https://unpkg.com/vue@3"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<input type="file" ref="fileInput"/>
<input type="button" value="上传" @click="upload"/>
</div>
</body>
<script>
const { createApp, ref } = Vue
const app = createApp({
setup() {
const fileInput = ref(null);
const upload=function(){
const files = fileInput.value.files;
if(files.length<=0)return;
const file = files[0];
const formData = new FormData();
formData.append("file", file);
axios.post("http://localhost:5102/upload2", formData).then(
res=>{
console.log(res)
}
)
}
return {
upload,
fileInput
}
}
})
app.mount("#app")
</script>
</html>
2、多文件上传
注意:input标签中的multiple属性设置后可以选择多个文件
后端代码:
[HttpPost("/upload3")]
public string upload()
{
IFormFileCollection form= Request.Form.Files;
if (form!=null)
{
foreach (FormFile file in form)
{
if (file != null)
{
string fileDir = "D://picture1/";
if (!Directory.Exists(fileDir))
{
Directory.CreateDirectory(fileDir);
}
string filePath = fileDir + file.FileName;
using (var fileStream = System.IO.File.Create(filePath))
{
file.CopyTo(fileStream);
}
}
}
return "上传成功";
}
return "上传失败";
}
前端代码:
<!--文档声明,声明当前网页的版本-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue3</title>
<script src="https://unpkg.com/vue@3"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<input type="file" ref="fileInput" multiple="multiple"/>
<input type="button" value="上传" @click="upload"/><br/>
{{ message }}
</div>
</body>
<script>
const { createApp, ref } = Vue
const app = createApp({
setup() {
const fileInput = ref(null);
const message=ref('')
const upload= function(){
const files = fileInput.value.files;
var formData = new FormData();
for(var i in files){
formData.append('file',files[i])
}
axios.post("http://localhost:5146/upload3", formData).then(
res=>{
message.value=res.data
}
)
}
return {
message,
upload,
fileInput
}
}
})
app.mount("#app")
</script>
</html>