1.前端：
<template>
<div class="app-container">
<el-upload
ref="upload"
accept='image/jpeg,image/gif,image/png'
:data="upload.paramData" /** 上传时附带的额外参数*/
:auto-upload="true"
:headers="upload.headers"
:action="upload.url"
:limit="upload.limit"
:multiple="upload.multiple"
list-type="picture-card"
:on-preview="handlePreview"
:on-remove="handleOutlineRemove"
:on-success="handleOutlineSuccess"
:file-list="upload.outlineFileList">
<i class="el-icon-plus"></i>
</el-upload>
<!-- 图片预览对话框 -->
<el-dialog title="图片预览" width="58%" :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
</div>
</template>
<script>
import uploader from '@/components/ImageUpload'
export default {
components: { uploader},
data() {
return {
//图片预览对话框是否显示
dialogVisible: false,
//图片预览地址
dialogImageUrl: "",
upload:{
// 设置上传的请求头部
headers: { Authorization: "Bearer " },
// 上传的地址
url: process.env.VUE_APP_BASE_API + "/Common/UploadImg/MultipleFileUpload",
//上传图片个数限制
limit: 5,
multiple: true,
paramData:{
type:'WTS',
id:'123'
},
outlineFileList: [
{
name: 'food.jpeg',
url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
},
{
name: 'food2.jpeg',
url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
}
]
}
}
},
mounted() {
},
methods: {
//上传图片-图片预览
handlePreview (file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
handleOutlineSuccess(response, file, fileList) {
debugger
this.upload.outlineFileList=fileList;//将最新的图片数组（系统插件控制的）赋值给提交时绑定的变量，方便数据跟进和提交
},
//概要图片移除事件
handleOutlineRemove(file, fileList) {
this.upload.outlineFileList=fileList; //将最新的图片数组（系统插件控制的）赋值给提交时绑定的变量，方便数据跟进和提交
this.$message({
type: 'info',
message: '已删除原有图片',
duration: 1000
});
},
}
}
</script>
2.webapi:
/// <summary>
/// 上传多个文件
/// </summary>
/// <param name="Files"></param>
/// <returns></returns>
[HttpPost]
[AllowAnonymous]
public JsonResult<object> MultipleFileUpload(IFormCollection Files)
{try
{
string dd = Files["File"];
var form = Files;//定义接收类型的参数
Hashtable hash = new Hashtable();
IFormFileCollection cols = Request.Form.Files;
if (cols == null || cols.Count == 0)
{
return Result<object>(false, "没有上传文件");}
foreach (IFormFile file in cols)
{
//定义图片数组后缀格式
string[] LimitPictureType = { ".JPG", ".JPEG", ".GIF", ".PNG", ".BMP" };
//获取图片后缀是否存在数组中
string currentPictureExtension = Path.GetExtension(file.FileName).ToUpper();
if (LimitPictureType.Contains(currentPictureExtension))
{//为了查看图片就不在重新生成文件名称了
// var new_path = DateTime.Now.ToString("yyyyMMdd")+ file.FileName;
var new_path = Path.Combine("uploads/images/", file.FileName);
var path = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot", new_path);using (var stream = new FileStream(path, FileMode.Create))
{图片保存
....................(略)
}
}
else
{
return Result<object>(false, "请上传指定格式的图片");}
}
return Result<object>(false, "上传成功");
}
catch (Exception ex)
{
return Result<object>(false,"上传失败"+ ex.ToString());
}
}
引用 IFormCollection 类 获取 Asp.Net.Core 中 Http 请求的一个类，就可以直接获取form表单中的参数
参考链接：
.net core webapi 上传图片_刘建峰的博客-CSDN博客
Upload 上传 (组件) - Element UI 中文开发手册 - 开发者手册 - 云+社区 - 腾讯云 (tencent.com)