vant-ui uploader上传文件,修改文件名

vant 使用上传表单组件(调用手机摄像头拍照) 在vant组件的成功引入的前提下,写入以下内容 <van-uploader :after-read="afterRead" :max-size="4 * 1024 * 1024" @oversize="onOversize" capture="camera" class="uploader"> <!-- <span>点击调用摄像头进行拍摄</span> --> </van-uploader> 属性解释 after-read:是文件读取完成 阅读详情
  1. 为什么修改文件名?

    有些时候为了保证文件名唯一性,我们需要二次处理已选择的文件,文件名添加时间戳

  2. 怎么修改?

    van-uploader文件上传组件为我们提供了before-read、after-read、before-delete属性,分别用来指定文件读取前、读取文件完成后、删除文件前的回调函数。通常文件上传方法是写在文件读取完成回调函数中的,首先我们需要确定我们在回调函数中拿到的文件是什么样的,浏览器中打印回调函数中的file参数

    在这里插入图片描述

    仔细观察我们会发现,这个是在file文件的外层又封装了一层,我们拿到的文件本身是这样的

    在这里插入图片描述

    仔细阅读van-ui的源码,我们会发现

    在这里插入图片描述

    在这里插入图片描述

    在这里插入图片描述

    组件里面返回给我们的是一个File对象,其中file属性才是我们的文件流,所有我们要修改和上传的是File对象中的file属性

    file类型是只读的,强行修改文件名会发生错误,我们可以通过构造一个新的file对象来达到修改文件名的目的

    //这里演示的是单个文件上传的情况
    afterRead(file) {
        const tempFile = file.file
        const type = tempFile.type
        const size = tempFile.size
        const newName = new Date().getTime() + tempFile.name
        let uploadFile = new File([tempFile],newName,{type,size})
        let formData = new FormData() 
        formData.append('file', uploadFile)
        //调用文件上传接口上传文件
    }
    
vant van-uploader上传已经成功变修改了status里的内容 vant van-uploader上传已经成功变修改了status里的内容 postImg(file) { file.status = 'uploading'; file.message = '上传中...'; this.files.name = file.file.name; // 获取文件名 this.files.type = file.file.type; // 获取类型 setTimeout(() => { 阅读详情

相关推荐

Vant Uploader单图上传与表单提交的实战指南(前后端协作)

本文详细解析了使用Vant Uploader组件实现单图上传,并与表单数据协同提交至后端的完整实战流程。重点阐述了如何通过FormData对象整合文件与表单字段,并对比了同步与异步两种前后端协作策略,为移动端开发中常见的“表单+图片”提交场景提供了清晰的解决方案。

opencv7vision的博客 273

vant 上传文件

在做项目时我们都会碰到需要上传文件,接下来就给大家分享一个vant二次封装的上传组件。1、在components文件夹下创建imageUpload.vue文件。组件绑定返回的是以逗号隔开的字符串,如果不需要就在组件里面改就可以了。在使用时用v-model绑定就行了。(2)disabled是否禁用上传。(1)accept自定义上传格式。(3)slot自定义修改样式。在这里修改自己需要的样式。

vvvvv88888的博客 3352

5分钟搞定Unity+Visual Studio开发环境配置(含C#游戏开发工作负载)

本文提供了一份详细的Unity与Visual Studio开发环境配置指南,帮助开发者在5分钟内完成C#游戏开发工作负载的设置。从Unity Hub安装到Visual Studio关键组件选择,再到常见问题排查,全面覆盖环境搭建的各个环节,显著提升游戏开发效率。

weixin_29014237的博客 248

vant移动端上传附件

1.vant-ui默认上传附件为图片格式 <van-uploader :after-read='afterRead' :max-count="1"> <!-- 可以自己修改默认添加的样式 max-count:限制了一次上传的个数 after-read:为上传后的回调函数 --> </van-uploader> 2.修改vant-ui上传文件如word、excel、ppt、pdf等 <van-uploader :af

故里的博客 6799

【面试题】MySQL索引相关的面试题(红黑树,hash,B树,B+树)

自己整理了几个面试题分享给大家 问题1:红黑树为什么那样设计? 首先聊一下二叉搜索树,主要特点是左节点比根节点小,右节点比根节点大,并且左右子树都是二叉搜索树。缺点是在极端情况下,比如插入都是有序的,就会出现退化的情况有序序列树退化成链表。 二叉搜索树 退化成链表的二叉搜索树 此时,要想让树的节点平均分布就需要平衡树了,红黑树就是平衡树的一种(平衡二叉搜索树)。然后,一棵树的查询性能取决...

Mr_黑_ 的博客 4042

密码学小白必看:三大顶级会议论文下载与阅读指南(附完整资源链接)

本文为密码学初学者提供了系统获取和阅读三大顶级会议(Crypto、Eurocrypt、Asiacrypt)论文的实战指南。详细介绍了通过IACR官方渠道、ePrint预印本等权威资源免费下载论文的方法,并分享了高效筛选、精读核心章节及构建个人知识体系的具体策略,帮助读者快速切入密码学研究前沿。

weixin_28363123的博客 393

react中,antd组件中的upload实现,文件的上传,文件的下载,导出,批量导出(直接调接口),上传额外的参数(data)

react中,antd组件中的upload实现,文件的上传,文件的下载,导出,批量导出(直接调接口),上传额外的参数(data)

夜空孤狼啸的博客 8238

免费测试国外大模型Claude 3.7 Sonnet API:无需api key(秘钥)

Claude 3.7 Sonnet是Anthropic公司推出的第三代Claude系列AI模型中的中规模版本(2024年发布),在性能与效率间实现平衡。该模型基于改进的Transformer架构,支持128K上下文窗口,擅长复杂推理、数学计算和创意写作,在GSM8K数学基准测试中准确率达92%。其采用"宪法AI"伦理框架,通过多轮对抗训练减少有害输出,同时新增多模态理解能力(可解析图片/图表内容)。Claude 3.7 Sonnet是Anthropic推出的高效轻量级大模型,主打快速响应与成本优化。

Explinks的博客 1497

vue中如何更改el-upload中的文件名name跟type , 改变后缀为webp让图片更小

如果是手动上传的话 , before-upload就不会生效 , 我们需要把限制图片格式跟大小的放在 on-change中

iFfy的博客 2299

Materials Studio多层聚合物建模全流程:从Build Layers到LAMMPS data文件导出避坑指南

本文详细解析了使用Materials Studio构建多层聚合物模型并导出为LAMMPS data文件的全流程。重点剖析了Build Layers工具的核心逻辑、真空层处理技巧,并提供了解决导出过程中Z轴坐标偏移问题的实战方案,特别是如何利用msi2lmp工具的-shift参数进行精准校正,确保模型在LAMMPS中模拟的稳定性和准确性。

hhh00的博客 913

记录Android Studio连接华为(nova)手机鸿蒙系统踩过的坑

鸿蒙系统的华为老机子比较麻烦,坑有点多,兄弟们加油!

沉迷单车的追风少年 7921

H5:如何将vant-uploader上传的base64图片转换为文件上传到服务器

H5中使用vant的uploader组件选择的图片,一次选择一张返回的是对象,一次选择多张返回的数组(包含一个个对象),但是这些对象都是base64的格式,不是想要的文件格式,于是需要我们转换。

干饭搬砖两不误。 5125

Android 14.0 SystemUI状态栏居中显示时间和修改时间显示样式

在14.0的系统rom定制化开发中,在systemui状态栏系统时间默认显示在左边和通知显示在一起,但是客户想修改显示位置,想显示在中间,所以就要修改SystemUI 的Clock.java 文件这个就是管理显示时间的,居中显示的话就得修改布局文件了

安卓兼职framework和app工程师的博客 978

【Vue2】Vant2上传文件使用formData方式,base64图片转Blob再转File上传

vant2上传组件,用formData格式上传文件到后台,vue2语言,vant2组件库

qq_51055690的博客 4295

国科大学习资料--人工智能原理与算法-第六次作业解析(学长整理)

国科大学习资料–人工智能原理与算法-第六次作业解析(张文生老师主讲)(6.6、6.7、6.11) 6.6 说明如何通过使用辅助变量把诸如A+B=C这样的三元约束转变成三个二元约束。假设值域是有限的。(提示:考虑引进新变量表示变量对的值,引进约束如“X是Y变量对中的第一个元素”。)然后说明如何把多于三个变量的约束类似地转换为二元约束。说明如何通过改变变量的值域来消除一元约束。这就完整演示了任何CSP都可以转变为只含二元约束的CSP。 答:首先,我们引入一个新变量AB,假设A和B的范围均为N,AB的范围为N×N

无名何许人的博客 2870

efm32 入门.pdf

本PDF共计22页,介绍的是操作驱动API,下载与否自己斟酌。

关于vant Uploader 上传的图片和文件回显重新编辑中遇到的问题

1、图片和文件在上传之前是base64和file格式的才能在缩略图中显示相关信息,然而上传之后图片转换成了https的网络地址的形式,即二进制数据格式(不知道说法对不对),总之是个网络地址可以直接在浏览器上显示的,文件可以直接从浏览器上下载下来。文件重新接收的时候也是https的格式不携带其他的文件信息,这个时候需要自己从https地址中剥离文件名字再显示出来下面是我实际运用中的代码this.file是上传的双向绑定的变量【】olddata.file是从后端获取的https的文件地址。......

doudou15203211327的博客 4683

visio安装包

Microsoft Office Visio 是一款专业的制图软件。利用经过更新的形状、协作工具和数据链接图表,创建专业级图表以简化复杂的信息。

vant 上传附件后回显_Vue + VantUI Uploader 上传组件, 实现上传功能, 但 手机实时上传照片只回显, 上传不上去 。...

电脑浏览器 没有任何问题手机上操作, 就会出现图片上传不上去, 也没有报错, 怀疑是 没有触发上传事件 , 但又 不知道如何修改, 求大神给个 建议。。来个Demo 那就好极了这是前端 页面<div v-if="page==6"><van-uploader :after-read="onRead" accept="image/*" multiple><div sty...

weixin_39723010的博客 1503

老版QQ原生表情gif动态

这是老版的QQ表情,不过全是动态的的,Windows照片查看器是不会动的,可以右击用浏览器打开查看,再说一遍是老版的,只是分享给宁愿用老版也要动态的人。

蓝牙模块HM-10手册

蓝牙模块HM-10手册,该手册对蓝牙模块HM-10进行了详细的介绍和使用方法以及一些AT指令。

Vue+vant实现图片上传添加水印

图片上传大家都不会陌生,就算是一个新人也会干的事儿。但说到加水印,当初我一直以为只能是在后端实现。原来,在前端也是能实现图片上传加水印的。//---------------------------分割线--------------------代码就是这些,然而,在此中,我是把图片加水印和图片base64转file两个不同的博文混在一起写的。顺便我也把file文件转base64的封装函数也发一下。当然,这个我也是在网上找的。第二种方法,跟上面的方法差不多,只是这种方法可以随意去调整水印的位置和大小什么的。

风清扬的专栏 457

vue + vant实现图片上传加水印

(注:以下的代码都来自于csdn,只是我把两部份代码合在一起来实现我的需求而已,在最后面,我也会附上原作者的接,大家都不容易)base64转file:【https://blog.youkuaiyun.com/qq_43886365/article/details/126729188】图片加水印 :【https://blog.youkuaiyun.com/King0217/article/details/121562949】代码就是这些,然而,在此中,我是把图片加水印和图片base64转file两个不同的博文混在一起写的。

weixin_42371812的博客 2161

js - 图片base64转file文件的两种方式

js把图片base64转file文件的两种方式

尽日寻春不见春,芒鞋踏遍陇头云。归来笑拈梅花嗅,春在枝头已十分。 1万+

vant uploader组件,回显文件、文件名

效果: 刚开始的时候不回显文件名称,new了一个File,传入文件名就可以了 父组件 <van-field v-else name="gzsmwjys" label="故障说明文件(原始)" :required="gzsmwjysRequired"> <template #input> <!--把vant uploader封装成组件--> <VantUploader type="gzsmwjys"

我的博客 1万+

van-uploader上传图片后,再次编辑,回显预览

通过插槽可以自定义上传区域的样式,将上传按钮写在需要的地方上传图片

weixin_42476586的博客 4093

文件上传改文件名

element ui的文件上传器是uploader,他里面存的文件打印下来的标准格式是; 红色:需要传输的内容form 绿色:uploader 蓝色:uploader【0】 黄色:uploader【0】中的文件部分(raw),如果需要改文件名,就是改raw中的name 但是这个file类型的保存方式只可读,不可写。 于是我们新建一个文件格式重新保存这个文件就可以了,只是保的时候偷偷改一下他的文件名,代码如下: if (this.dataForm.file[0].raw !== undefined) {

SanOrintea的博客 1048

vant组件基本使用

vant的基本使用以及Toast和Upload而的使用

weixin_45566730的博客 1006

VUE vant图片上传

【代码】VUE vant图片上传。

m0_71966801的博客 341

vue3 uniapp + vant ui 实现上传图片后再次点击上传功能

代码】vue3 vant ui 实现上传图片后再次点击上传功能。

· 1825
上一篇: 浏览器事件循环机制
下一篇: Day.js使用小记
codezha
博客等级 码龄10年 28粉丝 98原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值