位置: IT常识 - 正文

vue实现文件上传(vue实现文件上传和下载)

编辑:rootadmin
vue实现文件上传

推荐整理分享vue实现文件上传(vue实现文件上传和下载),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue实现文件上传,兼容IE,vue实现文件上传和下载页面,vue文件上传和下载,vue文件上传组件,vue文件上传组件,vue实现文件上传和下载页面,vue文件上传功能,vue实现文件上传,兼容IE,内容如对您有帮助,希望把文章链接给更多的朋友!

这里使用的是vue2,ui用的是element ui ,后期有时间会更新vue3版本的。

前端文件上传使用的是ui框架中的Upload的图片列表缩略图,喜欢别的样式可以直接更改。

看图注

fileChange():方法可以直接获取到上传文件的状态及可以直接拿到图片的值可以新建一个数组直接存储即可

因为文件类型都是以FormData类型存储的,就比如你正常的数组类型就应该是Arr类型一样的,将图片存储到FormData中,若你是多个图片上传直接使用forEach即可。

vue实现文件上传(vue实现文件上传和下载)

axios的使用这里就不做强调了,直接官网看实例就好了。

因为这个demo使用的是前后端分离的方式,所以我这里用的后端是.net6的这里也顺带讲一下吧

先创建一个实体存储文件、路径、扩展名

新建一个逻辑类

public async Task<string> UplodAsync(UpdoadDto updoad){//标记是否有未上传的文件int x = 0;//存储未成功的文件名var fileName = "";string[] arr = new string[updoad.file.Count];//如果当前存储地址不存在则创建if (!Directory.Exists(updoad.savePath)){Directory.CreateDirectory(updoad.savePath);}//如果没有文件直接返回if (updoad.file.Count==0){return "请选择需要上传的文件";}for (int i = 0; i < updoad.file.Count; i++){//获取文件扩展名var filetype = Path.GetExtension(updoad.file[i].FileName);//当前给定的文件扩展名里没有包含上传的文件扩展名if (updoad.filetype.IndexOf(filetype.ToLower())<-1){return "未包含该文件类型,请重新上传";}//判断文件大小var length = updoad.file[i].Length;if (length > Convert.ToInt64(this.configuration["MaxFileSize"])){arr[i] = updoad.file[i].FileName;continue;}x++;//存储文件Hash名,防止文件重复上传var hash = SHA1.Create();//读取文件的请求流var hashBytes = hash.ComputeHash(updoad.file[i].OpenReadStream());var saveName = BitConverter.ToString(hashBytes).Replace("-", "") + filetype;FileInfo fileInfo = new FileInfo(updoad.savePath + saveName);//若文件不存在则开始创建if (!fileInfo.Exists){using FileStream fs = File.Create(updoad.savePath + saveName);updoad.file[i].CopyTo(fs);fs.Flush();}}fileName = string.Join(",", arr);if (x != updoad.file.Count){fileName = fileName.TrimStart(',');fileName = fileName.TrimEnd(',');return "文件名为:" + fileName + "超出";}return "上传成功";}

1、我这里选择的是新建一个接口然后依赖注入一下,如果不想太麻烦可以直接new()出来。

注入好以后新建一个API控制代码如下:

[HttpPost]public async Task<string> UpdoadAsync([FromForm] UpdoadDto updoad){//物理地址,如果拿到源码直接更改成自己电脑的本地路径即可updoad.savePath = @"D:\测试上传图片\";//可以上传的类型updoad.filetype = ".gif|.jpg|.jpeg|.png|.webp";return await _uploadFile.UplodAsync(updoad);}

这样就完成了一个简单的多文件上传,当然一定要记得配跨域哦!

大神勿喷!!

需要前后端源码的可以直接私信我

本文链接地址:https://www.jiuchutong.com/zhishi/299345.html 转载请保留说明!

上一篇:Web网页基于html、CSS设计——“爱家居”素材(html基础网页)

下一篇:机器学习:基于逻辑回归对优惠券使用情况预测分析

  • 分公司报增值税吗
  • 增值税小规模纳税人
  • 发票章盖金额上去了
  • 增票普票税额是否可以抵扣吗
  • 商场返券活动300返220
  • 价外收取的返还利润是什么意思
  • 一般销售商品业务
  • 提前退休获得一次性补贴要交个人所得税吗?
  • 超出经营范围能不能开发票
  • 车船使用税是否必须交
  • 固定资产房屋折旧年限及残值
  • 金融性负债总额是什么
  • 为什么负债不等于亏损
  • 社会团体收取的会费是否缴纳增值税
  • 进项税额多出来怎么处理
  • 中国每年森林火灾造成的损失
  • 企业破产应收账款要发询证函吗
  • 二手车过户员怎么样
  • 华为手机怎么删除多余的桌面
  • win11专业版和家庭中文版区别
  • 新会计准则下企业合并财务报表问题研究
  • 自产自用产品的会计处理
  • 合伙企业取得红利怎么交税
  • 清理系统所有垃圾
  • win7系统网络连接出现红叉
  • 汇算清缴时业务招待费税收金额为零是什么原因
  • 以固定资产对外投资交税吗
  • 高新技术企业取消资格怎么处罚
  • dat文件转换成wps表格
  • 保险业营改增
  • 怎么调整去年的业务招待费的比例
  • 销货方开具红票,购货方怎么入账
  • 其他应付款转营业外收入摘要
  • php编程基础与案例开发
  • PHP:imagecolordeallocate()的用法_GD库图像处理函数
  • 超经营范围开具发票
  • 企业所得税核定征收方法
  • php读取xml接口数据
  • 公司缴纳残保金怎么做账
  • html/css/javascript
  • python查看type
  • ajax可以在静态页面
  • 如何去掉或修改文件夹
  • 业务招待费是否计入管理费用
  • 软件使用权计入什么科目
  • 股票股利的资金来源
  • 建筑公司可以开3个点的专票吗
  • 如何利用sql进行数据传输
  • sqlyog配置
  • 通行费发票如何勾选
  • 小规模申报表填写
  • sqlserver2008默认实例
  • 小型微利企业计算企业所得税
  • 消费税如何计量
  • 消费税也是流转税吗
  • 未分配利润可以用于企业经营吗
  • 福利费税前扣除工资薪金包含哪些
  • 交增值税会计凭证怎么做
  • 股东股权转让后还能起诉公司或者股东侵害其权利吗
  • 税负率偏低
  • 暂估出口收入如何计算
  • 行程单发票抬头是什么意思
  • 出口退税过期怎么处理
  • 会计记账科目表
  • 帐薄和账簿区别
  • win8还能用吗
  • macbook macos
  • winxp和win7双系统安装
  • macbook os x
  • ramaint.exe - ramaint是什么进程 有什么用
  • win10系统的电脑有哪些
  • 层序遍历递归实现
  • jquery实现
  • document.write与writeln的输出内容区别说明
  • 安卓快速开发平台
  • 四川省电子税务局官网下载
  • 国家税务总局吕梁市税务局官网
  • 汽车排量与购置税的关系
  • 医保账户被扣财富怎么办
  • 福建省狱警招聘医生
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设