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 => {
---------------------------------------------
生活的意义就是你自己知道你要做什么,明确目标。没有目标,后面都是瞎扯!
https://pengchenggang.gitee.io/navigator/
SMART原则:
目标必须是具体的(Specific)
目标必须是可以衡量的(Measurable)
目标必须是可以达到的(Attainable)
目标必须和其他目标具有相关性(Relevant)
目标必须具有明确的截止期限(Time-based)
生活的意义就是你自己知道你要做什么,明确目标。没有目标,后面都是瞎扯!
https://pengchenggang.gitee.io/navigator/
SMART原则:
目标必须是具体的(Specific)
目标必须是可以衡量的(Measurable)
目标必须是可以达到的(Attainable)
目标必须和其他目标具有相关性(Relevant)
目标必须具有明确的截止期限(Time-based)