TNBLOG
首页
博客
视频
资源
问答
猿趣
手机
关于
搜索
收藏
便签
笔记
消息
创作
登录
剑轩
斯人若彩虹
博主信息
排名
6
文章
6
粉丝
16
评论
8
文章类别
CSS
22篇
微服务
37篇
Git
13篇
.NET
96篇
移动开发
30篇
软件架构
20篇
.NET Core
108篇
.NET MVC
11篇
英语
3篇
随笔
98篇
Bootstrap
3篇
Redis
22篇
编辑器
10篇
Js相关
15篇
虚拟化
8篇
更多
Oracle
7篇
Python
12篇
数据库
25篇
EF
16篇
微信
3篇
前端
81篇
消息队列
7篇
docker
23篇
多线程
1篇
Java
4篇
软件基础
2篇
C++
2篇
WCF
7篇
Linux
5篇
nginx
3篇
K8S
9篇
ABP
2篇
最新文章
.net core 接收 el-upload 文件上传。el-upload配合.net core webapi 文件上传。vue 3文件上传
python游戏开发库pygame。pygame实现贪吃蛇
k8s安装网络插件calico
k8s常用命令,k8s查看pod的详情与日志,k8s相关日志文件等
k8s加入集群一直卡到Running pre-flight checks
.net core swagger 添加header参数。swagger传递jwt token
virtualbox虚拟机centos7设置固定IP,并保证主机宿主机通信与虚拟机访问外网
k8s部署应用常见错误
部署应用到k8s集群
裸机搭建k8s集群
裸机搭建k8s集群可能遇到的坑
最新评价
{{item.articleTitle}}
{{item.blogName}}
:
{{item.content}}
关于我们
ICP备案 :
渝ICP备18016597号-1
网站信息:
2018-2022
TNBLOG.NET
技术交流:
群号677373950
联系我们:
contact@tnblog.net
欢迎加群
欢迎加群交流技术
原
.net core 接收 el-upload 文件上传。el-upload配合.net core webapi 文件上传。vue 3文件上传
144
人阅读
2022/8/3 17:26
总访问:
1763641
评论:
0
收藏:
0
手机
分类:
.NET Core
 ### 前端就是vue 3的elemnt ui ``` <template> <div class="upload-container"> <!-- <vab-upload ref="vabUploadRef" :limit="50" name="file" :size="2" url="/upload" /> --> <vab-upload ref="vabUploadRef" :limit="50" name="file" :size="2" url="http://localhost:8002/api/upload" /> <el-button type="primary" @click="handleShow()">模拟上传</el-button> </div> </template> <script> import VabUpload from '@/plugins/VabUpload' export default defineComponent({ name: 'Upload', components: { VabUpload, }, setup() { const vabUploadRef = ref() const handleShow = () => { vabUploadRef.value.handleShow() } return { vabUploadRef, handleShow, } }, }) </script> ``` VabUpload: ``` <template> <el-dialog v-model="dialogFormVisible" :before-close="handleClose" :close-on-click-modal="false" :title="title" width="909px" > <div class="upload"> <el-alert :closable="false" :title="`支持jpg、jpeg、png格式,单次可最多选择${limit}张图片,每张不可大于${size}M,如果大于${size}M会自动为您过滤`" type="info" /> <el-upload ref="uploadRef" accept="image/png, image/jpeg" :action="action" :auto-upload="false" class="upload-content" :close-on-click-modal="false" :data="data" :file-list="fileList" :headers="headers" :limit="limit" list-type="picture-card" :multiple="true" :name="name" :on-change="handleChange" :on-error="handleError" :on-exceed="handleExceed" :on-preview="handlePreview" :on-progress="handleProgress" :on-remove="handleRemove" :on-success="handleSuccess" > <template #trigger> <vab-icon icon="add-line" /> </template> <el-dialog v-model="dialogVisible" append-to-body title="查看大图"> <div> <el-image :src="dialogImageUrl" /> </div> </el-dialog> </el-upload> </div> <template #footer> <div v-if="show" style="position: absolute; top: 10px; left: 15px; color: #999" > 正在上传中... 当前上传成功数:{{ imgSuccessNum }}张 当前上传失败数:{{ imgErrorNum }}张 </div> <el-button type="primary" @click="handleClose">关闭</el-button> <el-button :loading="loading" style="margin-left: 10px" type="success" @click="submitUpload" > 开始上传2 </el-button> </template> </el-dialog> </template> <script> import { useUserStore } from '@/store/modules/user' import _ from 'lodash' export default defineComponent({ name: 'VabUpload', props: { url: { type: String, default: 'http://localhost:8002/upload222', required: true, }, name: { type: String, default: 'file', required: true, }, limit: { type: Number, default: 50, required: true, }, size: { type: Number, default: 1, required: true, }, }, setup(props) { const userStore = useUserStore() const { token } = storeToRefs(userStore) const $baseMessage = inject('$baseMessage') const state = reactive({ uploadRef: null, show: false, loading: false, dialogVisible: false, dialogImageUrl: '', action: '', headers: {}, fileList: [], picture: 'picture', imgNum: 0, imgSuccessNum: 0, imgErrorNum: 0, typeList: null, title: '上传', dialogFormVisible: false, data: {}, }) const submitUpload = () => { state.uploadRef.submit() } const handleProgress = () => { state.loading = true state.show = true } const handleChange = (file, fileList) => { if (fileList && fileList.length > 0) { if (file.size > 1048576 * state.size) { fileList.filter((item) => item !== file) state.fileList = fileList } else { state.allImgNum = fileList.length } } } const handleSuccess = (response, file, fileList) => { state.imgNum = state.imgNum + 1 state.imgSuccessNum = state.imgSuccessNum + 1 if (fileList.length === state.imgNum) { setTimeout(() => { $baseMessage( `上传完成! 共上传${fileList.length}张图片`, 'success', 'vab-hey-message-success' ) }, 1000) } setTimeout(() => { state.loading = false state.show = false }, 1000) } const handleError = (err, file) => { state.imgNum = state.imgNum + 1 state.imgErrorNum = state.imgErrorNum + 1 $baseMessage( `文件[${file.raw.name}]上传失败,文件大小为${_.round( file.raw.size / 1024, 0 )}KB`, 'error', 'vab-hey-message-error' ) setTimeout(() => { state.loading = false state.show = false }, 1000) } const handleRemove = () => { state.imgNum = state.imgNum - 1 state.allNum = state.allNum - 1 } const handlePreview = (file) => { state.dialogImageUrl = file.url state.dialogVisible = true } const handleExceed = (files) => { $baseMessage( `当前限制选择 ${state.limit} 个文件,本次选择了 ${files.length} 个文件`, 'error', 'vab-hey-message-error' ) } const handleShow = (data) => { state.title = '上传' state.data = data state.dialogFormVisible = true } const handleClose = () => { state.fileList = [] state.picture = 'picture' state.allImgNum = 0 state.imgNum = 0 state.imgSuccessNum = 0 state.imgErrorNum = 0 state.headers['Authorization'] = `Bearer ${token}` state.dialogFormVisible = false } onMounted(() => { state.headers['Authorization'] = `Bearer ${token}` //这里给上传地址 state.action = props.url }) const percentage = computed(() => { if (state.allImgNum === 0) return 0 return _.round(state.imgNum / state.allImgNum, 2) * 100 }) return { ...toRefs(state), submitUpload, handleProgress, handleChange, handleSuccess, handleError, handleRemove, handlePreview, handleExceed, handleShow, handleClose, percentage, } }, }) </script> <style lang="scss" scoped> .upload { height: 500px; .upload-content { .el-upload__tip { display: block; height: 30px; line-height: 30px; } :deep() { .el-upload--picture-card { width: 128px; height: 128px; margin: 3px 8px 8px 8px; border: 2px dashed #c0ccda; .ri-add-line { font-size: 24px; } } .el-upload-list--picture { margin-bottom: 20px; } .el-upload-list--picture-card { .el-upload-list__item { width: 128px; height: 128px; margin: 3px 8px 8px 8px; } } } } } </style> ``` 文件上传的类型配置,要加什么类型继续让后面加就行了 ``` accept="image/png,image/jpeg,.xls,.xlsx,.txt" ``` ### .net core webapi后端 和其他上传图片的方式几乎都是一样的。从Request.Form.Files中取出来文件处理保存即可。核心代码如下: ``` using Microsoft.AspNetCore.Authorization; using Microsoft.AspNetCore.Http; using Microsoft.AspNetCore.Mvc; using System; using System.Collections; using System.Collections.Generic; using System.IO; using System.Linq; using System.Threading.Tasks; namespace WY.JBLand.API.API.V1 { [Route("api/[controller]")] [ApiController] public class UpLoadController : ControllerBase { /// <summary> /// 上传多个文件 /// </summary> /// <param name="Files"></param> /// <returns></returns> [HttpPost] [AllowAnonymous] public string Post(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 "没有上传文件"; } foreach (IFormFile file in cols) { //定义图片数组后缀格式 string[] LimitPictureType = { ".JPG", ".JPEG", ".GIF", ".PNG", ".BMP" }; //获取图片后缀是否存在数组中 string currentPictureExtension = Path.GetExtension(file.FileName).ToUpper(); if (LimitPictureType.Contains(currentPictureExtension)) { //这里暂时不重新生成文件名称,图片重命名使用guid或者时间都可以 // 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)) { file.CopyTo(stream); stream.Flush(); } } else { return "请上传指定格式的图片"; } } return "上传成功"; } catch (Exception ex) { return "上传失败"; } } } } ```
欢迎加群讨论技术,群号:677373950
评价
{{titleitem}}
{{titleitem}}
{{item.content}}
{{titleitem}}
{{titleitem}}
{{item.content}}