vant组件上传文件的使用

news/2024/7/10 23:11:01 标签: javascript, css, vue.js, html5, es6

因为:after-read="beforeRead"写错了,应该是after-read,文件读取完成后的回调函数,但是我刚开始写成了before-read,这是(文件读取前的回调函数,返回 false 可终止文件读取,支持返Promise)vant组件里面的,搞了好半天才出来。一定要细心。

<div class="uploderloding">
    <label for="">上传附件:</label>
    <van-uploader accept="image/*,.pdf,.doc.,rar,.zip,.docx" v-model="fileList" :after-read="beforeRead">
        <van-button icon="upgrade" type="default">上传文件</van-button>
    </van-uploader>
    <pcss"> style="margin-left: 5.4em;">支持扩展名:.rar .zip .doc .docx .pdf .jpg...</p>     
</div>
beforeRead (file,detail) {
  const abcd = file.abc = 1
  console.log(file,'detail',detail)
  if (abcd == 1) {
     file.status = 'uploading';
     file.message = '上传中...';
     setTimeout(() => {
        file.status = 'done';
        file.message = '上传成功';
        vant.Toast(file.message);
      }, 1000);
      clearTimeout()
  }else{
     file.status = 'uploading';
     file.message = '上传中...';
     setTimeout(() => {
        file.status = 'failed';
        file.message = '上传失败';
      }, 1000);
  }
  // return file,detail;
},

http://www.niftyadmin.cn/n/763905.html

相关文章

openstack rocky 安装_通过DevStack最小化部署OpenStack

干货分享OpenStack云计算平台&#xff0c;帮助服务商和企业内部实现类似于 Amazon EC2 和 S3 的云基础架构服务(Infrastructure as a Service, IaaS)。OpenStack 包含两个主要模块&#xff1a;Nova 和 Swift&#xff0c;前者是 NASA 开发的虚拟服务器部署和业务计算模块&#x…

javaee根据数据生成信息分布图_原创 | 使用JPA实现DDD持久化-数据库连接配置:persistence.xml

第二节 数据库连接配置&#xff1a;persistence.xml为了通过JPA将领域对象的状态持久化到数据库&#xff0c;必须告知JPA数据库的类型、位置、账号访问等相关信息。根据JPA规范&#xff0c;这些信息应该定义在类路径下的META-INF/persistence.xml文件中。在maven项目中&#xf…

ajax和jq的使用

input和textarea都可以使用它的value值获取它的长度&#xff0c;也可以把value的值当做参数传。 <input typetext value onkeyupshowup(this.value)/>function showup (str) {// 执行的逻辑&#xff0c;这就可获取value的长度了var xmlhttp;if (str.length0){ document.…

window原生js跳转页面

// 这是返回上一页 window.history.go(-1); window.history.back(); // 这是跳转页面 window.location.herf 跳转的地址

a算法和a*算法的区别_A* 路径搜索算法

假设地图中存在起点和终点&#xff0c;路径搜索算法可以用于搜索起点到终点的路径。在机器人路径规划&#xff0c;或者游戏中都需要用到路径搜索算法。本文介绍一种经典的 A* 算法&#xff0c;和 Dijkstra 算法相比&#xff0c;A* 采用启发式的搜索策略&#xff0c;能够更快地搜…

mysql function_MySQL 快速创建千万级测试数据

点击上方“后端技术精选”&#xff0c;选择“置顶公众号”技术文章第一时间送达&#xff01;作者&#xff1a;IKNOW本尊juejin.im/post/5ce372c36fb9a07ef63fb191推荐阅读(点击即可跳转阅读)1. SpringBoot内容聚合2. 面试题内容聚合3. 设计模式内容聚合4. 排序算法内容聚合5. 多…

python递归算法案例_python-动态规划的递归、非递归实现

概要 本文只是简单的介绍动态规划递归、非递归算法实现 案例一 题目一:求数组非相邻最大和 [题目描述] 在一个数组arr中&#xff0c;找出一组不相邻的数字&#xff0c;使得最后的和最大。 [示例输入] arr1 2 4 1 7 8 3 [示例输出] 15 from functools import wraps def memoDeco…

break 、continue 、return(使用循环结束循环)

break 终止循环&#xff0c;底下的就不执行了。 continue 跳过循环&#xff0c;执行底下的循环 return 只能在函数里使用&#xff0c;下面有内容也不会执行了。