使用react-vant上传图片遇到的问题

embedded/2024/9/24 19:10:08/

使用react-vant Uploader上传图片后出现的问题。

先试用upload上传图片。

javascript"><Form.Itemrules={[{ required: true, message: '请上传头像' }]}label='上传头像'name='files'><Uploader accept='*' maxCount="1" onChange={imgFile} /></Form.Item>

图片上传成功后,点击删除图标清除图片后会出现file undefined的报错。 

 

 

解决方案:

判断file的长度,当file的长度不为0时在执行change事件。

javascript"> const imgFile = (file) => {if (file.length !== 0) {console.log(file.length !== 0);let parm = new FormData()parm.append('file', file[0].file)console.log(file);axios({url: "url",method: "post",data: parm}).then(res => {console.log(res); //成功回调avatar = `url${res.data.url}`console.log(avatar);Toast.success('上传成功')}).catch(err => {console.log(err); //失败回调});}}


http://www.ppmy.cn/embedded/15928.html

相关文章

【SpringCloud】OpenFeign高级特性

【SpringCloud】OpenFeign高级特性 文章目录 【SpringCloud】OpenFeign高级特性1. 超时控制1.1 全局配置1.2 指定配置 2. 重试机制3. 替换Http客户端3.1 引入依赖3.2 配置 4. 请求/响应压缩5. 日志打印6. 综合配置 1. 超时控制 默认OpenFeign客户端等待60秒钟&#xff0c;但是服…

玩转Virtual Box虚拟机

玩转Virtual Box虚拟机 虚拟化技术和虚拟机简介 什么是虚拟化技术&#xff1f; 虚拟化技术是将计算机的各种硬件资源予以抽象、转换、分割、组合的一种计算机技术。虚拟化技术打破了实体结构间不可切割的障碍&#xff0c;从而使用户可以按照需求重新组合硬件资源&#xff0c…

磨损对输送带安全的影响

磨损对输送带安全的影响 在工业生产中&#xff0c;输送带作为重要的物流传输设备&#xff0c;广泛应用于煤炭、化工、冶金、电力、建材等多个行业。然而&#xff0c;输送带在使用过程中不可避免地会出现磨损现象&#xff0c;这不仅会影响其使用寿命&#xff0c;还可能对生产安…

如何配置nginx的转发?

配置Nginx的转发可以通过修改Nginx的配置文件来实现。以下是配置Nginx转发的基本步骤&#xff1a; 打开Nginx的配置文件&#xff0c;通常位于/etc/nginx/nginx.conf或/usr/local/nginx/conf/nginx.conf。 在http块中添加一个新的server块&#xff0c;用于配置转发目标的基本信…

VSCode 常用配置

文章目录 插件安装插件设置 推荐设置1. 控制具有未保存更改的编辑器的 自动保存2. 启用自动猜测编码3. 平滑滚动和光标闪烁的设置4. 自动格式化的设置5. 自动换行功能6. 按下回车键时如何接受代码建议的行为7. 建议列表中如何预先选择建议8. 启用自定义对话框样式9. 控制着是否…

NLP——序列文本信息处理

序列文本信息处理是指对那些具有明确词序或结构顺序&#xff08;如句子、段落、篇章等&#xff09;的文本数据进行专门的分析和转换&#xff0c;以保留并利用其内在的时序或逻辑关系。在NLP中&#xff0c;处理序列文本信息通常涉及以下几个关键步骤&#xff1a; 分词&#xff0…

JavaScript流程控制语句

JavaScript 中的流程控制语句用于控制代码的执行流程。以下是 JavaScript 中常见的流程控制语句及其详细代码示例&#xff1a; 1.if 语句&#xff1a; javascriptlet age 18;if (age > 18) { console.log("你已经成年了"); } else { console.log("你还未成…

SpringMvc中的异常处理器(在SpringBoot中也可使用)

目录 一、单个控制器异常处理 二、全局异常处理器 三、自定义异常处理器 在开发过程中&#xff0c;Dao&#xff0c;service&#xff0c;Controller层代码出现异常都可能抛出异常。如果哪里产生异常就在哪里处理异常&#xff0c;则会降低开发效率。所以一般情况下我们会让异常…