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 表单提交 保存的时候再提交文件,之前一直是选择文件就传了,这个也比较好的更多相关文章

  1. 如何让form表单在enter键入时不提交

    今天在做我的一个小玩意 在线聊天工具的时候 form表单只有一个text和一个button每当我键入enter的时候就刷新.很是郁闷,直接在form上onsumbit=false.才行. 下面是我查询 ...

  2. form表单 一个input时 回车自动提交

    问题描述 form表单中,如果当前表单只有一个input输入框时,单击回车会自动提交当前表单. 解决方案 在当前form表单中添加一个隐藏的input, <input style="d ...

  3. 【jQuery】将form表单通过ajax实现无刷新提交

    //将form转换为AJAX提交 function ajaxSubmit(url,frm,fn){ var dataPara=getFormJson(frm); $.ajax({ url:url, t ...

  4. html form表单追加input元素后在提交

    form.append(input); //input为对象 (设置name和val有效) $("#form1").submit();//提交事件

  5. js阻止form表单重复提交

    防止表单重复提交的方法总体来说有两种,一种是在js中阻止重复提交:另一种是在后台利用token令牌实现,大致思路是生成一个随机码放到session和form表单的隐藏输入框中,提交表单时两者对比,表单 ...

  6. HTML 中按钮作为form表单元素提交特性两则 --- 参HTML考标准分析

    相同name的submit 类型的input提交行为 描述 这种情况, <input type="submit" name="ACTION" value= ...

  7. form表单取消按钮自动提交

    默认写在form表单里的按钮可以自动提交表单,现在要实现的效果是点击button按钮调用js函数,再有ajax提交 <button type="button" class=& ...

  8. Html form 表单提交前验证

    可以使用form表单的onsubmit方法,在提交表单之前,对表单或者网页中的数据进行检验. onsubmit指定的方法返回true,则提交数据:返回false不提交数据. 直接看下面的代码: 1 & ...

  9. 使用ajax方法实现form表单的提交(附源码)

    写在前面的话 在使用form表单的时候,一旦点击提交触发submit事件,一般会使得页面跳转,页面间的跳转等行为的控制权往往在后端,后端会控制页面的跳转及数据传递,但是在某些时候不希望页面跳转,或者说 ...

  10. 使用ajax方法实现form表单的提交

    作者:13 GitHub:https://github.com/ZHENFENG13 版权声明:本文为原创文章,未经允许不得转载. 写在前面的话 在使用form表单的时候,一旦点击提交触发submit ...

随机推荐

  1. app api 登录 流程 accessToken refreshToken 图解 过程分析

    随着app 增长 带动了 api 的增长,有了api 总是离不开登录,怎么实现简单安全的登录过程至关重要. 不让用户每次超时都输入密码,不在客户端保存账号密码 ,用户体验与安全至关重要. 没有绝对的安 ...

  2. 【C语言进阶】【小项目】实现一个通讯录【C语言知识点汇总项目】通过这个项目,掌握C语言重要知识点

    [C语言进阶][小项目]实现一个通讯录[C语言知识点汇总项目]通过这个项目,掌握C语言重要知识点 欢迎来到#西城s的博客,今天,博主带着大家用C实现一个通讯录!干货满满不要错过噢! 作者: #西城s ...

  3. P7907 [Ynoi2005] rmscne题解

    题目链接:rmscne 神仙经典数据结构难题.看到求区间种类数有关的东西,需要下意识的反应到经典老题 HH的项链,这里可以学习我这篇 题解.具体学习下扫描线怎么做这类东西的. 看看本题,首先处理区间查 ...

  4. Git 简明教程(一)

    版本控制工具,早期的vss tfs svn等,这些应该是老一辈程序员常用的工具.目前 git 已经在版本控制领域占主流的地位,因为国外的github 和国内的码云 gitee 均用的是git. git ...

  5. 《ASP.ENT Core 与 RESTful API 开发实战》-- (第5章)-- 读书笔记(上)

    第 5 章 使用 Entity Framework Core 5.1 Entity Framework Core EF Core 是微软推出的 ORM 框架,一种为了解决高级编程语言中的对象和关系型数 ...

  6. Asp .Net Core 系列:Asp .Net Core 集成 Panda.DynamicWebApi

    目录 简介 Asp .Net Core 集成 Panda.DynamicWebApi 配置 原理 什么是POCO Controller? POCO控制器原理 ControllerFeatureProv ...

  7. C语言程序设计之字符串处理

    C语言程序设计-字符串处理 第一题:回文数判断 问题描述] 回文是正读和倒读都一样的句子.读入一个最大长度不超过50个字符的句子,判断其是否是回文. [输入形式] 输入一个最大长度不超过50个字符的句 ...

  8. NC24370 [USACO 2012 Dec S]Milk Routing

    题目链接 题目 题目描述 Farmer John's farm has an outdated network of M pipes (1 <= M <= 500) for pumping ...

  9. 图解3种常见的深度学习网络结构:FC、CNN、RNN

    01 全连接网络结构 全连接(FC)网络结构是最基本的神经网络/深度神经网络层,全连接层的每一个节点都与上一层的所有节点相连. 全连接层在早期主要用于对提取的特征进行分类,然而由于全连接层所有的输出与 ...

  10. 惠普CP1025后盖传感器松导致不停自检或打印中掉电, 跳闪三角灯

    上次修了离合器, 没出两星期又出问题了. CP1025这个型号就是出名的开机特别慢, 正常自检是1分钟, 但是前天我在给机器换完粉盒后, 自检似乎进入了死循环, 一直在自检. 周末才有空看看能不能解决 ...