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

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

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

先试用upload上传图片。

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

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

解决方案:

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

 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); //失败回调
                });
        }
    }


相关文章
|
开发框架 前端开发 API
react上传图片
react上传图片
153 1
|
JavaScript 前端开发
React 如何进行上传图片 #11
React 如何进行上传图片 #11
271 0
|
12天前
|
前端开发 JavaScript 开发者
深入理解React Hooks:提升前端开发效率的关键
【10月更文挑战第5天】深入理解React Hooks:提升前端开发效率的关键
|
7天前
|
前端开发
深入解析React Hooks:构建高效且可维护的前端应用
本文将带你走进React Hooks的世界,探索这一革新特性如何改变我们构建React组件的方式。通过分析Hooks的核心概念、使用方法和最佳实践,文章旨在帮助你充分利用Hooks来提高开发效率,编写更简洁、更可维护的前端代码。我们将通过实际代码示例,深入了解useState、useEffect等常用Hooks的内部工作原理,并探讨如何自定义Hooks以复用逻辑。
|
12天前
|
前端开发 JavaScript API
探索React Hooks:前端开发的革命性工具
【10月更文挑战第5天】探索React Hooks:前端开发的革命性工具
|
6天前
|
前端开发 数据管理 编译器
引领前端未来:React 19的重大更新与实战指南🚀
React 19 即将发布,带来一系列革命性的新功能,旨在简化开发过程并显著提升性能。本文介绍了 React 19 的核心功能,如自动优化重新渲染的 React 编译器、加速初始加载的服务器组件、简化表单处理的 Actions、无缝集成的 Web 组件,以及文档元数据的直接管理。这些新功能通过自动化、优化和增强用户体验,帮助开发者构建更高效的 Web 应用程序。
25 1
引领前端未来:React 19的重大更新与实战指南🚀
|
8天前
|
前端开发 JavaScript 开发者
探索现代Web前端技术:React框架入门
【10月更文挑战第9天】 探索现代Web前端技术:React框架入门
|
16天前
|
前端开发 JavaScript API
前端技术分享:React Hooks 实战指南
【10月更文挑战第1天】前端技术分享:React Hooks 实战指南
|
16天前
|
前端开发 数据安全/隐私保护
前端技术实战:React Hooks 实现表单验证
【10月更文挑战第1天】前端技术实战:React Hooks 实现表单验证
|
21天前
|
开发框架 前端开发 JavaScript
React、Vue.js 和 Angular主流前端框架和选择指南
在当今的前端开发领域,选择合适的框架对于项目的成功至关重要。本文将介绍几个主流的前端框架——React、Vue.js 和 Angular,探讨它们各自的特点、开发场景、优缺点,并提供选择框架的建议。
32 6