在使用Vant中Uploader过程中遇到的坑:图片状态更改等
2024-09-07 23:05:37
图片允许多张上传,在使用file.status时总是不生效,直接跳转到成功状态,后来尝试加入了定时器;同时多张上传时采用判断数组的方式
<van-uploader
accept="*"
v-model="fileList"
multiple
:max-count="4"
:after-read="afterRead"
/>
在下方使用时:
// 图片上传后回调
beforeRead(file) {
if (!file.type.startsWith('image') && !file.type.startsWith('video')) {
Toast.fail('请上传图片或视频')
return false
} else if (file.size > 104857600) {
Toast.fail('选择上传内容不能超过100M')
return false
} else {
return true
}
},
setUpload(file) {
let that = this
setTimeout(() => {
//添加上传状态,避免用户在上传未完成时点击提交按钮
// this.isUploading = true
let config = {
headers: {
//添加请求头
'Content-Type': 'multipart/form-data',
},
}
let deviceFile = []
let params = new FormData()
if (Array.isArray(file)) {
//因为该组件单选是对象,多选是数组
deviceFile = file
console.log(deviceFile, 'deviceFile')
} else {
deviceFile.push(file)
}
deviceFile.map((item) => {
//files是后台参数name字段对应值
params.append('file', item.file)
})
// 文件上传状态
Toast('文件正在上传请等候,请收到上传成功提示后再关闭页面!')
this.isLoading = false
// params.append('file', file.file)
this.$http({
// 这里填写的是api的内容
})
.then((res) => {
if (res.data.code == 0) {
Toast.success('上传成功!')
// 文件成功状态
if (Array.isArray(file)) {
file.forEach((item) => {
item.status = 'done'
item.message = '上传成功'
})
} else {
file.status = 'done'
file.message = '上传成功'
} this.isLoading = true
}
res.data.data.map((item) => {
that.fileid.push(item.fileid)
})
})
.catch()
file.status = ''
file.message = ''
}, 1000)
},
afterRead(file) {
// 文件上传状态
if (Array.isArray(file)) {
file.forEach((item) => {
item.status = 'uploading'
item.message = '上传中...'
this.setUpload(file)
})
} else {
file.status = 'uploading'
file.message = '上传中...'
this.setUpload(file)
}
},
最新文章
- Drop all the tables, stored procedures, triggers, constraints and all the dependencies in one SQL statement
- matlab 画图中线型及颜色设置
- json 判断字段
- Html_页面的高度宽度等
- Houdini 13在Ubuntu系统下流畅运行、不崩溃
- 【※索引】mysql索引常用命令
- Quartz CronTrigger应用
- SourceTree 实现 git flow 流程
- css实现文本超出两行隐藏
- EntityFrameworkCore将数据库Timestamp类型在程序中转为long类型
- github提交代码失败
- mysql数据库和JDBC学习
- mysql:general_log 日志、数据库线程查询、数据库慢查询
- 三款免费实用的文件夹同步/备份软件推荐 (SyncToy/FreeFileSync/Compare Advance)
- Java中用字符串常量赋值和使用new构造String对象的区别
- python之发送HTML内容的邮件
- jvm虚拟机---执行引擎子系统
- L1-042 日期格式化
- iOS-----AVFoundation框架的功能详解
- mariadb或者mysql忘记root密码
热门文章
- 使用 ES Module 的正确姿势
- Redisson 实现分布式锁原理分析
- linux 创建用户 用户组,sudo,禁止root远程ssh登录
- 运行项目时出现Sat May 15 20:00:19 CST 2021 WARN: Establishing SSL connection without server‘s identity veri
- halcon视觉入门扫盲篇
- bom案例6-轮播图
- 【JS】函数提升变量提升以及函数声明和函数表达式的区别
- Java泛型T与?
- uniap tab list 滑动
- 使用Docker安装ElasticSearch和可视化界面Kibana【图文教学】