使用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上传图片
257 1
|
JavaScript 前端开发
React 如何进行上传图片 #11
React 如何进行上传图片 #11
399 0
|
28天前
|
缓存 前端开发 JavaScript
React Hooks深度解析与最佳实践:提升函数组件能力的终极指南
🌟蒋星熠Jaxonic,前端探索者。专注React Hooks深度实践,从原理到实战,分享状态管理、性能优化与自定义Hook精髓。助力开发者掌握函数组件的无限可能,共赴技术星辰大海!
React Hooks深度解析与最佳实践:提升函数组件能力的终极指南
|
5月前
|
缓存 前端开发 数据安全/隐私保护
如何使用组合组件和高阶组件实现复杂的 React 应用程序?
如何使用组合组件和高阶组件实现复杂的 React 应用程序?
252 68
|
5月前
|
缓存 前端开发 Java
在 React 中,组合组件和高阶组件在性能方面有何区别?
在 React 中,组合组件和高阶组件在性能方面有何区别?
227 67
|
5月前
|
前端开发 JavaScript 安全
除了高阶组件和render props,还有哪些在 React 中实现代码复用的方法?
除了高阶组件和render props,还有哪些在 React 中实现代码复用的方法?
250 62
|
8月前
|
移动开发 前端开发 API
React 音频播放器组件 Audio Player
本文介绍如何使用React创建音频播放器组件,涵盖核心功能如播放/暂停、进度条、音量控制和时间显示。通过HTML5 `&lt;audio&gt;` 元素和React的声明式状态管理,实现交互式音频播放。常见问题包括控件不响应、进度条无法更新和音量控制失灵,并提供解决方案。此外,还讨论了浏览器兼容性、异步错误处理和性能优化等易错点及避免方法。
655 123
|
7月前
|
前端开发 JavaScript
除了使用Route组件,React Router还有其他方式处理404错误页面吗
除了使用Route组件,React Router还有其他方式处理404错误页面吗
215 58
|
7月前
|
前端开发
React 中高阶组件的原理是什么?
React 中高阶组件的原理是什么?
202 57
|
7月前
|
前端开发 开发者
除了函数组件和类组件,React 还有其他创建组件的方式吗?
除了函数组件和类组件,React 还有其他创建组件的方式吗?
169 57