如何在reactjs中使用formData添加多个图像

2023-12-25

我是 Reactjs 新手。我正在使用环回存储连接器来存储图像/文件。现在我的问题是使用上传多个文件formData()

my code

constructor(props){
    super(props);
    this.state = {
        car_photo : [],
        Car_Image : []
    }
}
fileUploadCarImg = ()=> {
        const fd = new FormData();
        this.state.Car_Image.forEach((item , i) => {
            fd.append('image2',this.state.Car_Image, this.state.Car_Image.name )
        });

        axios.post('http://localhost:3000/api/attachmentBanks/Car_Image/upload',fd , {
            onUploadProgress : ProgressEvent => {
                console.log('Upload Progress: ' + Math.round(ProgressEvent.loaded / ProgressEvent.total *100) + '%')
            }
        })
        .then(res => {
            this.setState({
                car_photo: res.data.result.files.image2[0].name,

            });

        });
    }

    fileSelectedCarImg = event =>{
        console.log(Array.from(event.target))
        this.setState({
            Car_Image: Array.from(event.target.files[0])
        })

    }

我的输入字段是

<FormGroup>
<span>Car Image</span> 
  <input style={{display :'none'}} type="file" onChange={this.fileSelectedCarImg} ref={fileInput3 => this.fileInput3 = fileInput3 } required multiple />
 <Button onClick={()=>this.fileInput3.click()} ><Icon type="upload" />Choose Image
 </Button> &nbsp;
 <Button onClick={this.fileUploadCarImg}> upload </Button>
</FormGroup>

使用此代码时Upload Progress: 100%在控制台中打印,但文件没有进入文件夹。 请任何人帮忙


我找到了工作代码

fileSelectedCarImg = event =>{
        const file = Array.from(event.target.files);
    this.setState({ file })
}

fileUploadCarImg =()=>{
        for (let index = 0; index < this.state.file.length; index++) {
            const element = this.state.file[index];
            const fd = new FormData();
            fd.append('image2',element,element.name )
            axios.post('http://localhost:3000/api/attachmentBanks/Car_Image/upload',fd , {
                onUploadProgress : ProgressEvent => {
                    console.log('Upload Progress: ' + Math.round(ProgressEvent.loaded / ProgressEvent.total *100) + '%')
                }
            })
            .then(res => {
                this.setState({
                    car_photo: res.data.result.files.image2[0].name,
                });

            });

        }
    }
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在reactjs中使用formData添加多个图像 的相关文章

  • 按 T​​ab 键可关闭从子菜单打开的 Material UI 对话框

    我需要创建一个菜单栏 其中包含许多带有子菜单的菜单 当我从顶级菜单项打开对话框时 一切都会按预期 预期进行 但是当我从子菜单打开对话框时 按 Tab 键会关闭该对话框 我尝试了几种不同的方法来实现嵌套菜单 并选择了此处讨论的方法 https
  • 是否可以覆盖material-ui组件的默认道具?

    可以说我想要每一个Button组件来自material ui有默认的 propsvariant contained color secondary 这可能吗 这方面的文档在这里 https material ui com customiza
  • 使用输入更新 redux 状态

    如何从文本输入更新 redux 状态 我正在尝试用文本输入做一个非常简单的 Hello World 当有人在文本输入中输入内容时 它应该更新我商店的 searchTerm 值 我无法弄清楚这些事情 1 如何获取输入的值并将其传递到其 onC
  • 获取React组件的类型propTypes定义

    假设有以下代码 TestComponent propTypes text React PropTypes string myEnum React PropTypes oneOf News Photos 我在另一个文件中执行了以下操作 使用
  • Menu.Item 中的 Antd 自动换行

    可以在 Menu Item 组件中应用自动换行吗 示例不起作用
  • Vue中有类似React.Fragment的东西吗?

    在 React 中我可以做这样的事情 parent component export default return div div 1 div div
  • 想要动态处理与分页相关的页码显示:ReactJS

    我有一些分页逻辑工作得很好 唯一的问题是我只能让它显示并固定数量的页面可供选择 现在我已经把它放到了 5 页 但我希望它能够根据总记录动态更改 假设我有 100 条记录 每页限制为 10 条 将有 10 页 现在我只能让它以这种方式显示 第
  • React 中的 Reconciliation 详解

    我是 React JS 的新手 谁能准确解释和解是如何运作的 我尝试从 React 官方网站上理解它 但没有得到它 我是这样理解的 您会同意 React 使用组件使事情变得简单且更快 通过 JSX 我们可以让用户定义的组件变得更容易 一天结
  • ReactTransitionGroup 不适用于 React-redux 连接组件

    我正在开发一个更大的项目 但我创建了这个简短的示例来说明问题 如果我使用Box组件 它的工作原理 它在控制台中输出componentWillEnter and componentWillLeave当我们点击按钮时 如果我使用BoxConta
  • React Router v4 不渲染组件

    React Router v4 渲染组件存在问题 在应用程序初始加载时 它将呈现与 URL 相对应的正确组件 但是 任何后续的组件Link单击不会呈现所需的组件 图书馆 反应路由器 4 2 2 https reacttraining com
  • 创建反应应用程序:npm 错误!解析“...”附近时 JSON 输入意外结束

    描述错误 npx create react app my app不适合我 我试过npm cache clean force但我一次又一次地遇到同样的错误 重现步骤 npm cache clean force npm npx create r
  • 使用 next.js 进行服务器端渲染与传统 SSR

    我非常习惯 SSR 意味着页面得到完全刷新并从服务器接收完整 HTML 的方法 其中根据后端堆栈使用 razor pub other 进行渲染 因此 每次用户单击导航链接时 它只会向服务器发送请求 整个页面将刷新 接收新的 HTML 这就是
  • 如何删除原生选项卡的边框

    我需要删除图像中标记的边框 我正在使用react native 和native base 选项卡 我需要删除选项卡的底部边框
  • React 设置背景颜色与状态 rgb

    所以我根据数据库的结果生成一个表 在数据库中我保留 rgb 值 例如 75 75 75 现在当我生成列表时 我想使用保存的值设置我的 td 的背景 tbody this state boxes map box i gt tr td box
  • webpack 4 React loadable 不会根据卡盘点分割供应商

    我目前正在使用 webpack 4 和 React loadable 来创建块 它实际上分块取决于断点 然而 供应商规模保持不变 React loadable 还不支持 webpack 4 吗 或者我缺少一些设置 css 实际上似乎被分成了
  • 使用 Hooks 从 React Native 中的 Firebase 实时数据库获取的数据未显示在屏幕上

    我最近开始在 React Native 中使用 Hooks 并尝试从 Firebase 实时数据库获取数据并将其呈现在 FlatList 中 数据以对象格式显示在控制台上 但它不起作用 它没有呈现在屏幕上 我究竟做错了什么 我怎样才能让它正
  • 卸载 React 时删除事件监听器

    我有更高阶的组件 反应如下 export default function InnerComponent class InfiniteScrolling extends React Component constructor props s
  • React-Redux:state.setIn() 和 state.set() 有什么区别?

    我见过使用setIn and set 在一些react redux代码中 state setIn state set 我在这里找到了一些文档https facebook github io immutable js https facebo
  • React onClick 事件仅在渲染组件时触发

    动态渲染组件的 onClick 函数应通过 useState 设置所选日期 imgs 上的 onClicks 完全按照您的预期工作 没有任何问题 即使只是在其位置放置一个带有 onClick 属性的 div 也是行不通的 当组件渲染时 on
  • 在 ReactJS 中创建动态目录

    我有一个组件 它代表一个页面 其中有多个SectionHeader 组件作为该页面的子组件 我想通过检查 Page 的子项 SectionHeaders 来动态创建目录

随机推荐

  • Android - 将字符串转换为字节[]

    我想将 icon 字符串转换为字节数组 然后将其转换为位图 问题是模拟器中的图像未显示 我想我做得不对 但我知道为什么 我将非常感谢你的帮助 提前致谢 这是我的 JSON 数据 project abbreviation abd custom
  • 使用进位标志进行多字加法

    GCC 有 128 位整数 使用这些我可以让编译器使用mul or imul仅一个操作数 指令 例如 uint64 t x y unsigned int128 z unsigned int128 x y 产生mul 我已经使用它创建了一个
  • 使用maven和jenkins部署到weblogic

    我们在项目中使用 Jenkins 在开发环境中进行构建和部署 我已经在 jenkins 中使用 maven 成功创建了一个 war 文件 现在我必须创建另一个作业来将该 war 文件部署到 weblogic 服务器中 但是 我不知道在詹金斯
  • 当 src 不是有效站点时,Safari 不会调用 iframe onload

    对于以下 iframe Safari 永远不会调用 onload 函数 并且不会在 iframe 中显示任何内容 我测试过的所有其他浏览器都会调用 onload 并显示默认错误网页 为什么会发生这种情况 如果这个问题没有解决方案 那么我需要
  • 如何在winform中打上绿色勾号或红色叉号?

    有没有一种方法可以在 Windows 窗体中的标签旁边添加绿色勾号或红色十字 基本上我需要显示配置是否成功 我正在使用c Thanks 很容易做到 您可以在文本标签旁边添加两个图像 甚至是我在本示例中使用的标签 然后手动切换Visible财
  • 了解 CompletableFuture::runAsync

    我刚刚读过文档 https docs oracle com javase 8 docs api java util concurrent CompletableFuture html runAsync java lang Runnable
  • 交替行的 jQuery 表格样式与 CSS 表格样式

    对于服务器上生成的奇数 偶数行 使用带有类的 CSS 更快 更好 还是使用 jQuery 设置条纹样式更快 更好document Ready 我想开始使用 jQuery 来使我的标记不那么混乱 但我不确定性能 特别是对于较大 最多 200
  • 在 JS 中计算直方图的相似值的最佳方法是什么?

    我正在尝试创建随机生成的数据的直方图 因此目前我正在执行以下操作 假设创建了以下数组 returns 0 0024 0 0231 0 014 0 0005 0 008 我使用以下方法遍历数组 returnsRounded x Math ro
  • 这种广度优先搜索可以变得更快吗?

    我有一个数据集 它是一个大型未加权循环图 循环发生在大约 5 6 条路径的循环中 它由大约 8000 个节点组成 每个节点有 1 6 个 通常大约 4 5 个 连接 我正在进行单对最短路径计算 并实现了以下代码来进行广度优先搜索 from
  • 从资源设置应用程序图标时应用程序大小会增加

    我有一个大小为 16kb 的应用程序 通过 项目属性 菜单添加图标资源后 应用程序的大小如预期增加到 299kb 现在 在 属性 应用程序 下 当我将图标文件设置为 Resource IconName ico 时 文件大小再次增加到 581
  • 带有临时链接的提交按钮

    好的 我不知道我在做什么 我要回去帮助人们找工作 我在 Fiddle 中运行了所有内容 并将其迁移到两个不同的编辑器 一切都显示正常 但没有任何反应 没有警报 没有单击提交 我在我的笔记本电脑上尝试了一下 显示了两个页面 一个页面上有 pr
  • D3 - 重置 SVG 对象动画

    我正在用交互式标记制作一个图表 每个标记都沿着侧轴开始 单击时会移动到沿线的位置并增大尺寸 我让图标移动和增长 但在重置图表时遇到问题 我可以通过第二次单击使图标返回到其原始位置 但是第二次单击后图标将不再响应单击 我怀疑这很简单 但我没有
  • 防止 git checkout 覆盖文件

    另一位开发人员将他的 rvmrc 检查到了 git 存储库中 我已经删除了它并将其添加到 gitignore 但每次需要返回时它都会覆盖我的 rvmrc 我使用的是 OSX 所以我发现我可以使用 OSX 文件锁定机制 获取信息中的 锁定 复
  • 如何在数据库中保存标签(关键字)?

    我想使用 php 和 mysql 创建一个简单的标签系统 以便用户可以通过表单添加一些标签 我的问题是我应该将标签保存为单个数据库列中的数组吗 例如 tag1 tag2 tag3 或者我应该在数据库表中有单独的列 我应该在每列中保存每个标签
  • PowerShell 按嵌套字段选择和分组

    我有以下对象结构 resources Array resource PSCustomObject 名称 字符串 Tags PSCustomObject 所有者 字符串 more 所以我可以做 resources 0 Tags Owner并获
  • 在 iOS 中使用 AVCapture 捕获视频时进行缩放

    我正在使用 AVCapture 捕获视频并保存它 但我需要提供缩放选项 例如捏合缩放或通过缩放按钮 此外 视频的保存方式应与显示的方式完全相同 我的意思是当放大时 应以缩放的方式保存 如有任何帮助 链接将不胜感激 我设置 AVCapture
  • perl 正则表达式中的 OR 条件

    我正在尝试编写一个脚本 通过 Perl 中的正则表达式执行 OR 函数 我编写了一段代码 其中如果字符串包含 D 或 E 后跟 P 则应该打印 D或E后跟P 否则 D或E后不跟P 假设如果我给出 s ABCDEABCDEPABCDEAB 它
  • SameSite Cookie 标头和 Websocket 不起作用

    在我们设置 SameSite None 之前 我们的游戏无法在任何第 3 方网站上运行 正如这段视频中所示 https youtu be AYCvCrZyDk https youtu be AYCvCrZyDk 网站已加载 但网络套接字无法
  • OCaml 中的惰性“n 选择 k”

    作为枚举集合的更大问题的一部分 我需要编写一个 OCaml 函数 choose 它接受一个列表并输出为由该列表的元素组成的所有可能的大小为 k 的序列的列表 不重复序列 这可以可以通过排列相互获得 它们在最终列表中的顺序无关 例如 choo
  • 如何在reactjs中使用formData添加多个图像

    我是 Reactjs 新手 我正在使用环回存储连接器来存储图像 文件 现在我的问题是使用上传多个文件formData my code constructor props super props this state car photo Ca