vue 附件上传获取附近内容_vue实现文件上传功能
vue 文件上传,供大家参考,具体内容如下
首先 先说一下想要实现的效果
就如截图所见,需要将企业和需要上传的文件提交到后台处理,那么接下来就说如何实现
vue 实现
vue 页面代码
class="upload-demo"
ref="upload"
action="doUpload"
:limit="1"
:file-list="fileList"
:before-upload="beforeUpload">
选取文件
下载模板
取消
确定
上传之前的大小校验
beforeUpload(file){
debugger
console.log(file,'文件');
this.files = file;
const extension = file.name.split('.')[1] === 'xls'
const extension2 = file.name.split('.')[1] === 'xlsx'
const isLt2M = file.size / 1024 / 1024 < 5
if (!extension && !extension2) {
this.$message.warning('上传模板只能是 xls、xlsx格式!')
return
}
if (!isLt2M) {
this.$message.warning('上传模板大小不能超过 5MB!')
return
}
this.fileName = file.name;
return false // 返回false不会自动上传
},
手动上传确认提交
submitUpload() {
debugger
console.log('上传'+this.files.name)
if(this.fileName == ""){
this.$message.warning('请选择要上传的文件!')
return false
}
let fileFormData = new FormData();
fileFormData.append('file', this.files, this.fileName);//filename是键,file是值,就是要传的文件,test.zip是要传的文件名
let requestConfig = {
headers: {
'Content-Type': 'multipart/form-data'
},
}
this.$http.post(`/basedata/oesmembers/upload?companyId=`+this.company, fileFormData, requestConfig).then((res) => {
debugger
if (data && data.code === 0) {
this.$message({
message: '操作成功',
type: 'success',
duration: 1500,
onClose: () => {
this.visible = false
this.$emit('refreshDataList')
}
})
} else {
this.$message.error(data.msg)
}
})
}
后台
/**
* 上传文件
*/
@PostMapping("/upload")
@RequiresPermissions("basedata:oesmembers:upload")
public R upload(@RequestParam("file") MultipartFile file, @RequestParam("companyId") Integer companyId) {
System.out.println(companyId);
if (file.isEmpty()) {
throw new RRException("上传文件不能为空");
}
//上传文件 相关逻辑
return R.ok();
}
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
vue 附件上传获取附近内容_vue实现文件上传功能相关推荐
- java web 文件上传工具类_JavaWeb中实现文件上传的方式有哪些?
上回我们说了下文件下载的方式有哪些,这次我们从不同的环境下简单来说说文件上传的方式有哪些. 文件上传的方式Servlet2.5 方式 Servlet3.0 方式 SpringMVC 方式 案例实操 S ...
- ajaxfileupload 监听上传进度_一篇文章学会文件上传
文件上传 文件上传原理 文件上传的原理,就是DOM中的FileUpload对象.就是这句 <input type="file"> 但仅仅这样并不足够. 文件上传本质上是 ...
- 原生Servlet文件上传和下载Servlet多个文件上传
2019独角兽企业重金招聘Python工程师标准>>> 转载:原文连接https://blog.csdn.net/HaHa_Sir/article/details/81744629 ...
- 文件在上传过程中发生异常服务器端,文件上传服务器端
文件上传服务器端 内容精选 换一换 本节操作介绍本地Linux操作系统主机通过SCP向Linux云服务器传输文件的操作步骤.登录管理控制台,在ECS列表页面记录待上传文件的云服务器的弹性公网IP.上传 ...
- 上传问题总结(文件大小检测,大文件上传)
PHP上传问题总结(文件大小检测,大文件上传) 由于涉及到本地和服务器两方面的安全问题,所以基于input type="file"形式的页面文件上传一直处于一个很尴尬的位置.一方面 ...
- 二阶段补充:文件上传服务端处理,后端文件上传、前端两种文件上传方式
1.文件上传 2.后端文件上传 两种方案: 兼容性较好的commons-fileupload,支持所有版本的Servlet,即所有版本的Tomcat 优点: 兼容性 缺点 需要外部jar,比较麻烦.代 ...
- element vue 上传模板_vue+element 文件上传
一.前言 element ui 已经提供了文件上传的组件,直接拿来就能用.具有以下几个特点: 限制文件上传的个数,多个文件会发起多个请求. 可以设置文件选择后自动上传或者手动触发上传,并且手动触发可以 ...
- 模拟文件上传(一):手动文件上传
关于上传文件,首先我的第一个案例是一个文本文件的上传,简单容易上手! 首先我们上传文件肯定就属于实体内容部分了:所以不能过GET方式请求了,要通过POST方式请求: 因为: 1.get方式是URL传值 ...
- input file文件上传_微服务间的文件上传与下载-Feign
一.文件上传 (1)服务提供者 使用一个MultipartFile接收上传的文件 /** (2)Feign的Client接口 服务门面-feign的接口 pom.xml <dependencie ...
最新文章
- 运行shell脚本时怎么知道jdk路径_Linux中如何查询运行文件的全路径的方法
- 2021年春季学期-信号与系统-第十五次作业参考答案-第一小题参考答案
- 【POI xls】解析xls遇到的问题
- idea 配置多个jdk
- Delphi编程注意事项
- 说说docker run的--detach
- 【UI自动化测试】Mac下进行Monkey测试
- 话里话外:从“种房子”谈流程与制度的差别
- Multi-thread--多线程运行实例
- roi计算_计算开放式硬件项目的ROI的6个步骤
- 物联网linux_Linux的未来,Google的物联网标准等
- (转)Bibtex使用方法
- 正在导出系统过程对象和操作 卡住_开会时CPU 飙升100%同事们都手忙脚乱记一次应急处理过程
- mongo 多条件筛选_Excel筛选功能,你确定这些小技巧你都玩明白了
- 二十三、常用的标签:见源码
- java工程师什么城市就业_热门城市的Java薪资情况
- Linux下安装grafana
- TheFatRat一般使用
- 【转】西冷牛排,菲力牛排,眼肉牛排,雪花牛排,T骨牛排,沙朗牛排有什么不同?
- 解密拼多多800元裂变营销新方法