方案一_IFormFile接收:
1、element
<el-form-item label="上传文件">
<el-upload
ref="upload"
:auto-upload="false"
:limit="1"
:on-change="updownChangeHandler"
:on-success="updownSuccessHandler"
:on-error="updownErrorHandler"
:action="uploadURL"
accept="xlsx,xls"
class="upload-demo"
drag
multiple>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
<div slot="tip" class="el-upload__tip">只能上传.xls/.xlsx文件,且不超过30MB</div>
</el-upload>
</el-form-item>
。。。
computed: {
//文件的上传路径
//附带用户id和项目名称
uploadURL: function () {
return "http://localhost:5000/api/UpLoadFile?fileDirectory=" + this.form.SavePath_Folder;
}
},
methods: {
// 上传文件改动
updownChangeHandler(file) {
this.form.Name = file.name;
},
// 上传出错时
updownErrorHandler(err, file, fileList) {
console.log(err);
this.$message({
message: "模板上传出错:" + err.message,
type: "error"
});
},
// 上传文件完成
updownSuccessHandler(response, file, fileList) {
if (response.code !== 0) {
console.log(response);
this.$message({
message: "模板上传出错:" + response.message,
type: "error"
});
} else {
console.log("文件上传完成");
this.$message({
message: "模板添加完成!" + response.message,
type: "success"
});
this.$refs.upload.clearFiles();
this.$parent.getList();
this.dialogVisible = false;
}
}
}
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32.
- 33.
- 34.
- 35.
- 36.
- 37.
- 38.
- 39.
- 40.
- 41.
- 42.
- 43.
- 44.
- 45.
- 46.
- 47.
- 48.
- 49.
- 50.
- 51.
- 52.
- 53.
- 54.
- 55.
- 56.
- 57.
- 58.
- 59.
- 60.
- 61.
- 62.
2、WebAPI
/// <summary>
/// 上传
/// </summary>
/// <param name="file">form表单文件流信息</param>
[HttpPost("UpLoadFile")]
//public async Task<ActionResult<JsonMessage>> UpLoadFile(IFormFile file)
public async Task<ActionResult<JsonMessage>> UpLoadFile(IFormFile file, string fileDirectory)
{
var data = new JsonMessage();
//IFormFileCollection files = Reqzuest.Form.Files;
string path = AppDomain.CurrentDomain.BaseDirectory + @"StaticFiles/OpcSetUpTemplates/"; // 保存的根目录
var allowType = new string[] { "application/vnd.ms-excel", "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" }; // 上传文件的格式限制 xls与xlsx
var limitSize = 1024 * 1024 * 1024 * 1.5; // 上传文件的大小限制,小于1.5G
if (file == null) // 校验是否获取到文件
{
data.code = -1;
data.message = "请选择上传的文件!";
return data;
}
if (!allowType.Contains(file.ContentType)) // 格式不是我们需要的
{
data.code = -1;
data.message = "文件格式错误!";
return data;
}
if (file.Length > limitSize) // 限制大小
{
data.code = -1;
data.message = "文件大小不可超过1.5GB";
return data;
}
//if (!Directory.Exists(path)) // 保存根目录不存在就新建
//{
// Directory.CreateDirectory(path);
//}
// 获取文件
path += fileDirectory ?? ""; // 保存目录
if (!Directory.Exists(path)) // 保存目录不存在就新建
{
Directory.CreateDirectory(path);
}
//foreach (var file in files) // 存在多个文件时
path = Path.Combine(path, file.FileName); // 文件保存路径
//if (System.IO.File.Exists(path))
//{ // 文件路径中已存在该文件时
// data.code = -1;
// data.message = "文件路径中已存在该文件!";
// return data;
//}
using (var stream = new FileStream(path, FileMode.OpenOrCreate, FileAccess.ReadWrite))
{
await file.CopyToAsync(stream);
}
// 返回结果信息
data.code = 0;
data.message = "上传成功!文件路径:" + fileDirectory + file.FileName;
return data;
}
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32.
- 33.
- 34.
- 35.
- 36.
- 37.
- 38.
- 39.
- 40.
- 41.
- 42.
- 43.
- 44.
- 45.
- 46.
- 47.
- 48.
- 49.
- 50.
- 51.
- 52.
- 53.
- 54.
- 55.
- 56.
- 57.
- 58.
- 59.
- 60.
- 61.
- 62.
- 63.
- 64.
- 65.
方案二:
1、element
2、WebAPI
作者:꧁执笔小白꧂