图片允许多张上传,在使用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)
}
},

最新文章

  1. Drop all the tables, stored procedures, triggers, constraints and all the dependencies in one SQL statement
  2. matlab 画图中线型及颜色设置
  3. json 判断字段
  4. Html_页面的高度宽度等
  5. Houdini 13在Ubuntu系统下流畅运行、不崩溃
  6. 【※索引】mysql索引常用命令
  7. Quartz CronTrigger应用
  8. SourceTree 实现 git flow 流程
  9. css实现文本超出两行隐藏
  10. EntityFrameworkCore将数据库Timestamp类型在程序中转为long类型
  11. github提交代码失败
  12. mysql数据库和JDBC学习
  13. mysql:general_log 日志、数据库线程查询、数据库慢查询
  14. 三款免费实用的文件夹同步/备份软件推荐 (SyncToy/FreeFileSync/Compare Advance)
  15. Java中用字符串常量赋值和使用new构造String对象的区别
  16. python之发送HTML内容的邮件
  17. jvm虚拟机---执行引擎子系统
  18. L1-042 日期格式化
  19. iOS-----AVFoundation框架的功能详解
  20. mariadb或者mysql忘记root密码

热门文章

  1. 使用 ES Module 的正确姿势
  2. Redisson 实现分布式锁原理分析
  3. linux 创建用户 用户组,sudo,禁止root远程ssh登录
  4. 运行项目时出现Sat May 15 20:00:19 CST 2021 WARN: Establishing SSL connection without server‘s identity veri
  5. halcon视觉入门扫盲篇
  6. bom案例6-轮播图
  7. 【JS】函数提升变量提升以及函数声明和函数表达式的区别
  8. Java泛型T与?
  9. uniap tab list 滑动
  10. 使用Docker安装ElasticSearch和可视化界面Kibana【图文教学】