form 表单提交 保存的时候再提交文件,之前一直是选择文件就传了,这个也比较好
form 表单提交 保存的时候再提交文件,之前一直是选择文件就传了,这个也比较好
代码
<Upload :action="action"
:max-size="maxSizeMb"
:format="format"
:show-upload-list="false"
multiple
:before-upload="handleBeforeUpload"
:on-exceeded-size="handleMaxSize">
<Button>
<TfCommonIcon type="_upload-2-line"
color="#2082ED"
:size="16"></TfCommonIcon>
选择文件
</Button>
</Upload>
保存
save () {
if (this.files.length === 0) {
this.$Message.warning(`文件为空,请重新选择!`)
return
}
this.btnLoading = true
const fd = new FormData()
for (let i = 0; i < this.files.length; i++) {
fd.append('files', this.files[i])
}
console.info('this.files', this.files)
console.info('fd,', fd)
this.$api(this.action, fd, { contentType: 'multipart' }).then(res => {
if (res.status !== 20) return
this.$Message.success(`上传成功`)
this.files = []
this.visible = false
this.$emit('on-emit-upload-success', res.data)
}).finally(() => {
this.btnLoading = false
})
},
data
data () {
return {
visible: false,
btnLoading: false,
files: [], // 已选择的文件
action: `${this.$baseUrl}xxx/xxx/upload`,
format: ['mp3', 'm4a'], // pcm,wav,ogg(speex),ogg_opus,mp3,aac,m4a格式
maxSizeMb: 100 // MB
}
},
事件
handleMaxSize (file) {
this.$Notice.warning({
title: '文件大小超限',
desc: `文件${file.name}太大,上传文件大小不能超过${this.maxSizeMb}MB`
})
},
/**
* 上传之前的回调
* @param file
* @returns {boolean}
*/
handleBeforeUpload (file) {
const suffix = file.name.substring(file.name.lastIndexOf('.') + 1).toLowerCase() // 获取上传的文件后缀
if (this.format.length > 0 && !this.format.includes(suffix)) {
this.$Message.warning(`请选择${this.format}格式的文件!`)
return false
} else if (file.size > this.maxSizeByte) {
this.$Message.error(`文件大小超过${this.maxSizeMb}MB,请重新选择!`)
return false
} else {
this.files.push(file)
return false
}
}
api 部分函数
else if (_config['contentType'] === 'multipart') {
_data = data
_contentType = 'multipart/form-data'
}
// 返回ajax方法
return axios.request({
url,
withCredentials: true, // 单点登录 北京用到session,全局开启
data: _data,
headers: {
'moudleId': 'xxx',
'Content-Type': _contentType,
token: getToken() ? getToken() : ''
},
method: _config.method,
responseType: _config.responseType
}).then(res => {
form 表单提交 保存的时候再提交文件,之前一直是选择文件就传了,这个也比较好的更多相关文章
- 如何让form表单在enter键入时不提交
今天在做我的一个小玩意 在线聊天工具的时候 form表单只有一个text和一个button每当我键入enter的时候就刷新.很是郁闷,直接在form上onsumbit=false.才行. 下面是我查询 ...
- form表单 一个input时 回车自动提交
问题描述 form表单中,如果当前表单只有一个input输入框时,单击回车会自动提交当前表单. 解决方案 在当前form表单中添加一个隐藏的input, <input style="d ...
- 【jQuery】将form表单通过ajax实现无刷新提交
//将form转换为AJAX提交 function ajaxSubmit(url,frm,fn){ var dataPara=getFormJson(frm); $.ajax({ url:url, t ...
- html form表单追加input元素后在提交
form.append(input); //input为对象 (设置name和val有效) $("#form1").submit();//提交事件
- js阻止form表单重复提交
防止表单重复提交的方法总体来说有两种,一种是在js中阻止重复提交:另一种是在后台利用token令牌实现,大致思路是生成一个随机码放到session和form表单的隐藏输入框中,提交表单时两者对比,表单 ...
- HTML 中按钮作为form表单元素提交特性两则 --- 参HTML考标准分析
相同name的submit 类型的input提交行为 描述 这种情况, <input type="submit" name="ACTION" value= ...
- form表单取消按钮自动提交
默认写在form表单里的按钮可以自动提交表单,现在要实现的效果是点击button按钮调用js函数,再有ajax提交 <button type="button" class=& ...
- Html form 表单提交前验证
可以使用form表单的onsubmit方法,在提交表单之前,对表单或者网页中的数据进行检验. onsubmit指定的方法返回true,则提交数据:返回false不提交数据. 直接看下面的代码: 1 & ...
- 使用ajax方法实现form表单的提交(附源码)
写在前面的话 在使用form表单的时候,一旦点击提交触发submit事件,一般会使得页面跳转,页面间的跳转等行为的控制权往往在后端,后端会控制页面的跳转及数据传递,但是在某些时候不希望页面跳转,或者说 ...
- 使用ajax方法实现form表单的提交
作者:13 GitHub:https://github.com/ZHENFENG13 版权声明:本文为原创文章,未经允许不得转载. 写在前面的话 在使用form表单的时候,一旦点击提交触发submit ...
随机推荐
- 虚拟桌宠模拟器:VPet-Simulator,一个开源的桌宠软件, 可以内置到任何WPF应用程序
虚拟桌宠模拟器:VPet-Simulator,一个开源的桌宠软件, 可以内置到任何WPF应用程序 虚拟桌宠模拟器 一个开源的桌宠软件, 可以内置到任何WPF应用程序 获取虚拟桌宠模拟器 OnSteam ...
- Python 实现文件关键字扫描
第一段代码用户传入一个文件夹,自动扫描文件夹内特定文件是否存在某些关键字,如果存在则输出该文件的路径信息. # coding=gbk import sys,os,re def spider(scrip ...
- C++11之函数对象
目录 1.使用场景 2.函数对象 3.std::bind 4.总结 1.使用场景 在没有C++11的时候,我们通常使用回调函数来完成某些特定的功能,使用回调函数就需要先声明函数指针 示例: typed ...
- Dart常用核心知识
Dart简述 Dart 是一个为全平台构建快速应用的客户端优化的编程语言,免费且开源. Dart是面向对象的.类定义的.单继承的语言.它的语法涵盖了多种语言的语法特性,如C,JavaScirpt, J ...
- 【排序】什么都能排的C语言qsort排序详解【超详细的宝藏级别教程】深度理解qsort排序
[排序]什么都能排的C语言qsort排序详解[超详细的宝藏级别教程]深度理解qsort排序 作者: @小小Programmer 这是我的主页:@小小Programmer 在食用这篇博客之前,博主在这里 ...
- 自然语言开发AI应用,利用云雀大模型打造自己的专属AI机器人
如今,大模型层出不穷,这为自然语言处理.计算机视觉.语音识别和其他领域的人工智能任务带来了重大的突破和进展.大模型通常指那些参数量庞大.层数深.拥有巨大的计算能力和数据训练集的模型. 但不能不承认的是 ...
- koreanDollLikeness_v10模型下载及使用
koreanDollLikeness_v10模型 前几天给大家提供了koreanDollLikeness_v15模型的下载,最近小卷终于找到koreanDollLikeness_v10模型啊.先来说说 ...
- vue 导出多页pdf, window.print()实现
如果你对分页打印没思路,而网上的现成方案又不适合,不妨进来看看,也许会对你有帮助. 由于工作环境是局域网,对于插件的安装有限制,所以排除了jspdf + html2canvas的实现方式:采用wind ...
- Spring Boot 1.5.x 结合 JUnit5 进行接口测试
在Spring Boot 1.5.x中,默认使用Junit4进行测试.而在对Controller进行接口测试的时候,使用 @AutoConfigureMockMvc 注解是不能注入 MockMvc 对 ...
- 100 行代码实现用户登录注册与 RESTful 接口 - 手把手教程附 Python 源码
在开发大多数应用时,用户系统都是必不可少的部分,而我们总是需要开发围绕用户的登录,注册,获取,更新等接口.在这篇文章将带你用一百多行代码简洁地实现一套这样的用户鉴权与 RESTful 接口,并使用 S ...