vant的uploader上传图片遇到超时或则报错后页面图片的处理_昨夜小楼又东风。的博客-程序员秘密

技术标签: 笔记  

vant图片上传报错或失败的处理

上传图片失败页面渲染样式
删除失败图片

<template>
    <div>
        <van-cell required title=“事项图片” value=“(最多支持上传3张图片)” />
          <van-uploader
                  v-model="fileList"
                  :before-read="beforeRead"
                  :after-read="onReadIdCardback"
                  :before-delete="beforeDeleteBack"
                  :max-size="5*1024*1024"
                   multiple
                  :max-count="3"
                  @oversize="onOversize"
                  @click-preview="clickpreview"
          />
    </div>
</template>
<script>
export default {
     data() {
         return {
             fileList:[],// 组件双向绑定的图片数组
             pictureList:[] // 给接口的图片数组
         }
     },
     methods:{
         // 图片上传
         onReadIdCardback(file,detail){
             let params=new FormData();
             params.append('file',file.file);
             params.append('isPermission','N');
             comApi.uploadFile(params)
             .then((res)=>{
                 if(res.status==200){
                     // 做修改页面时接收的数据也要做这个处理,删除图片时才不会出错
                     let picture={};
                     picture.index=detail.index // 添加index是为了方便删除时找到对应的图片,防止删除失效
                     picture.attachmentId=res.DATA.attachId;
                     picture.attachmentName=res.DATA.attachName;
                     // 清除图片的状态
                     file.status='done'
                     vm.fileList.push(picture)
                 }else{
                     file.status='failed';
                     file.message='上传失败';
                     vm.$toast.fail('上传失败')
                 }
             })
             .catch((err)=>{
                 // 如果图片上传失败,页面上图片则显示上传失败
                     file.status='failed';
                     file.message='上传失败';
                     vm.$toast.fail('上传失败')
             })
         },
         // 图片上传失败重新上传
         clickPreview(file,datail){
             let vm=this;
             if(file&&file.status==='failed'){
                 vm.$dialog.confirm({
                       message:'是否尝试重新上传?',
                       theme:'round-button',
                       canfirmButtonText:'重新上传',
                       cancelButtonText:'删除',
                       canfirmButtonColor:'black',
                       cancelButtonColor:'#ee0a24'
                 }).then(()=>{
                     // 点击提示确认调用上传图片方法再次上传图片
                     vm.onReadIdCardback(file)
                 }).catch(()=>{
                     // 点击删除提示是否删除
                     vm.$dialog.confirm({
                         message:'确定要删除图片吗?',
                     }).then(()=>{
                         vm.fileList.splice(datail.index,1)
                     }).catch(()=>{})
                 })
             }
           },

           // 删除图片
           beforeDeleteBack(file,datail){
               let vm=this
               return new Promise((resolve,reject)=>{
                      vm.$dialog.confirm({message:'无确定删除图片?'})
                      .then(()=>{
                          if(file.status!=="failed"){
                              vm.pictureList.forEach((item,index)=>{
                                          if(item.index==detail.index){   // 判断删除的下标是否正确
                                                    vm.pictureList.splice(index,1) // 使用遍历找到的index去数组里面删除
                                          }
                              })
                          }
                          vm.$toast.success('删除成功');
                          resolve()
                      })
                      .catch((err)=>{
                           vm.$toast.success('已取消');
                           reject(err)
                      })
               })
           }
     }
}
</script>
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/m0_46577631/article/details/120905711

智能推荐

JDBC的使用(二):PreparedStatement接口;ResultSet接口(获取结果集);例题:SQL注入..._diku9497的博客-程序员秘密

ResultSet接口:类似于一个临时表,用来暂时存放数据库查询操作所获得的结果集。getInt(), getFloat(), getDate(), getBoolean(), getString(), getObject(), next(),:将指针向下移一行。例一:(输入用户名和密码验证是否登录成功):用Statement接口会导致,SQL注入!下图是代码:p...

让Datetimepicker控件只能选择时间,不允许直接改的无污染解决方案。_Where_the_way的博客-程序员秘密

最近在公司修改项目的时候遇到一个需求,要让实现了Datetimepicker控件的时间输入框不能让用户改时间。当时一想把文本框直接设置为只读不就行了吗,结果一运行发现时间控件也变灰色不能选择了,尴了个尬。没办法,只能求百度或者扣脑壳了呗。结果呢.....当然实现啦!上图:解决方案:1、设置输入框为只读(readonly)。2、在初始化时间控件的时候添加onGenerate事件去改变控件面板的不可用样式。$(startDateTimeId).datetimepicker...

在url中进行中文参数传递如何转换_start_zhang的博客-程序员秘密

比如:  http:localhost:8080/tets/test.action?username=" "    username="中国"  首先应对中文进行url编码:  username=URLEncoder.encode("中国","UTF-8");    然后再接受的jsp页面进行转换:         =new string(request.getPara

lua的缓动函数列表_兮迷风的博客-程序员秘密_lua 控制物体缓动

下面以一个完整的lua缓动函数-- 最简单的线性变化,即匀速运动function Linear(t,b,c,d) return c*t/d + b;end--==========================================-- 二次方缓动Quad = {}function Quad.easeIn(t,b,c,d) t = t / d; ret

bzoj 2115: [Wc2011] Xor (高斯消元求解线性基)_clover_hxy的博客-程序员秘密

2115: [Wc2011] XorTime Limit: 10 Sec  Memory Limit: 259 MBSubmit: 2081  Solved: 868[Submit][Status][Discuss]DescriptionInput第一行包含两个整数N和 M, 表示该无向图中点的数目与边的数目。 接下来M 行描述 M 条边,每行三个整数Si,

Vue3+Element-Plus 实现点击左侧菜单时显示不同内容组件展示在Main区域功能 二九_小丫头呀的博客-程序员秘密

1.本章目标1.1 点击不同的菜单列表,可以在右侧 (Main) 主体区域显示不同的组件页面2. 如何实现2.1 通过将左侧菜单列表改造成路由链接的形式来实现1. 首先应该为 Menu (菜单)启用vue-router 模式 (路由模式),默认是falseMenu 菜单 | Element Plus (gitee.io)https://element-plus.gitee.io/zh-CN/component/menu.html#menu-%E5%B1%9E%E6%8...

随便推点

linux platform机制的好处_xw面朝大海的博客-程序员秘密

从Linux2.6起,引入了一套新的驱动管理和注册机制:Platform_device和Platform_driver。Linux中大部分的设备驱动,都可以使用这套机制,设备用platform_device表示,驱动用platform_driver进行注册。 Linux platform driver机制和传统的device_driver机制相比,一个十分明显的优势在于platfo

树莓派使用usb摄像头_懿傕的博客-程序员秘密_raspivid usb摄像头

树莓派使用usb摄像头在树莓派上使用usb摄像头时,由于无法直接通过raspivid工具直接采集视频流,因此很多适用于树莓派专用摄像头的监控方案难以实现。sudo apt-get install fswebcam //安装拍照工具fswebcam -S 10 test2.jpg //拍照基础路径默认在homefswebcam -d /dev/video0 --no-banner -r 320x240 -S 10 /home/pi/Pictures/image.jpg//-d设置拍照的源解决黑屏问

gradle生成java文件_使用buildSrc Gradle项目和Codemodel生成java代码_张铁鱼的博客-程序员秘密

Introduction假设现在你现在需要在Android应用中嵌入和解析外部数据,你会怎么做?在本文中我们将在应用中获取互联网顶级域名(TLD)的列表。你可以在ICANN TLD报告报告中看到一共有一千多种顶级域名,时不时有新域名的加入,也有旧的域名被废弃。由于Android中管理TLDs的API很快就过时了,不赞成使用。哪里能获得最新的TLD的列表呢?幸好这里有一个INAN维护的机器识别源:I...

Google Earth Engine(GEE)——估算2000-2020年森林覆盖度的案例分析_此星光明的博客-程序员秘密

第一步:我们导入一个关于树冠覆盖的数据集,并使用 10% 的树覆盖阈值计算森林// 输入国界var countries = ee.FeatureCollection("USDOS/LSIB_SIMPLE/2017");// 选择哥伦比亚特区var kh = countries.filter(ee.Filter.eq("country_na","Cambodia")).geometry(); // 输入树冠覆盖率数据var tcc2000 = ee.Image("projects/servi

------<a href="http://www.itheima.com" target="blank">Java培训、Android培训、iOS培训、.Net培训</a>、期待与您交流! ----_wsq_30589177的博客-程序员秘密

黑马程序员   网络编程网络编程三要素:IP  寄信的地址                          端口    相当于收件人.在计算机上,可以同时有多个程序接收网络数据,每个程序都会占用至少一个端口.                          协议 双方都要看得懂  一.IP:IP地址是计算机在互联网上,唯一标示此计算机的地址;1.所谓IP地址就是给每个连接在

node.js mongoose 插件_renlanchuke的博客-程序员秘密

mongoose简介[mongoose][1]是node.js上一个mongodb的ODM(Object Data Model)插件。 MongoDB对于插入到collection的document没有限制,任何document可以存放 到任意的collection中,维护collection数据结构的统一需要我们自己去做。 Mongoose组件可以进行object document mapp

推荐文章

热门文章

相关标签