1 let common_url = 'http://192.168.1.1:8080/'; //服务器地址
2 let token = ''; //用户登陆后返回的token
3 /**
4 * 使用fetch实现图片上传
5 * @param {string} url 接口地址
6 * @param {JSON} params body的请求参数
7 * @ret
一.React中使用antd1.下载antd包 npm i antd -S2.按需引入//App.jsx文件
import {Button} from 'antd' //引入按钮组件
import {WechatOutlined, ShoppingCartOutlined } from '@ant-design/icons'; //icon图标库需要另外引入
import
转载
2024-03-16 10:47:47
697阅读
背景:第一次请求需要请求后端返回aws 一个link,再往link push文件,再调用另一个接口告诉后端已经上传成功
原创
2024-08-09 15:38:45
309阅读
react-router webpack 按需加载,与路由权限控制说明当网站规模越来越大,通过webpack 打包后的 react 项目也会越来越大,这会导致首页渲染时间变长,影响用户体验,webpack 提供了一种按需加载的方式,需要结合 react-router 使用,他会将代码拆分成多个小包,需要哪个部分就加载响应的包。React-router-v4 - Webpack 实现按需加载(cod
前言本次做后台管理系统,采用的是 AntD 框架。涉及到图片的上传,用的是AntD的 upload 组件。前端做文件上传这个功能,是很有技术难度的。既然框架给我们提供好了,那就直接用呗。结果用的时候,发现 upload 组件的很多bug。下面来列举几个。备注:本文写于2019-03-02,使用的 antd 版本是 3.13.6。使用 AntD 的 upload 组件做图片的上传因为需要上传多张图片
环境配置 安装脚手架:npm install create-react-app 安装yarn:brew install yarn 创建项目:create-react-app antd-demo 切换路径:cd antd-demo 安装路由:yarn add react-router-dom 安装ax ...
转载
2021-10-01 09:38:00
242阅读
2评论
关于antd官方文档的坑 首先先说一下antd的官方文档。 我不知道他们是怎么在管理站点的,文档内容估计很长一段时间没有更新了。这次公司项目中用到这个upload组件卡了我近两天,就是找不到跳出他们规定格式的坑。onChange事件 这个事件对于常常自由发挥的程序员来说,可以说是毫无用处(可能是我还没有必须用到它的地方),首先它只是用来改变状态的,文档中他被用来改变上upload组件的loadin
转载
2024-05-30 22:16:06
918阅读
npm i antd --save 按需引入import React, { Component } from 'react' import Button from 'antd/lib/button' import 'antd/dist/antd.css' export default class A ...
转载
2021-08-08 12:13:00
152阅读
2评论
前后分离 上传下载文件demo此篇文章只是我在学习中总结的一点经验,简单的小demo,只贴一些相关代码,里边加了注释,如有技术问题,欢迎指正。 本demo小介绍:没有扩展jpa的那部分。没有扩展后台限制文件大小的部分。文件上传到oracle Blob字段中存放(可自行扩展其它存放方式),在从中下载。一、上传react部分://引入:
import React from 'react';
impor
转载
2024-10-11 21:24:16
86阅读
React之Antd组件Modal对话框Modal.method()动态设置确认框和提示框 handleConfirm = (type)=>{ Modal[type]({ title:'确认?', content:'你
原创
2022-01-12 15:26:46
702阅读
Facebook 官方推出Create-React-App脚手架,基本可以零配置搭建基于webpack的React开发环境,内置了热更新等功能。详细文档可前往链接:Create-React-App文档本文将介绍使用Create-React-App脚手架搭建antd-mobile的开发环境。快速开始: npm install -g create-react-app /
通过 npm 安装antd和babel-plugin-import。babel-plugin-import是用来按需加载 antd
原创
2022-09-29 16:08:20
97阅读
就为这问题,今天找了一天,各种高大上又复杂的方案,看得我头都炸。就刚刚突然脑海里闪了一下,想到了这个绝对轻巧、绝对傻瓜式、又绝对稳定的解决方案,于是迫不及待写下这篇文章,算是一个小纪念吧 先描述问题:使用了 antd vue 的 upload 组件来上传文件,在beforeUpload中定义了一个 Promise 来实现校验上传文件是否符合rule,符合则会返回resolve,否则直接拒绝
转载
2024-07-24 14:31:32
1454阅读
表单:<a-form-model ref="form" :model="form" layout="horizontal" :label-col="{ span: 3 }" :wrapper-col="{ span: 18 }"> <a-form-model-item label=
原创
2022-07-06 11:04:10
368阅读
在页面上做一些搜索条件,为了方便我们可以做一个按钮"置空",或者清除,点击这个按钮实现将输入框中的值删除,在以前的html页面中我们很方便通过js来将值制空,但是react组件封装的很严重了,我们没有办法通过js来制空,即使可以实现也是比较麻烦的
原创
2022-09-17 02:46:26
510阅读
项目中新功能需要用到富文本编辑,查找了几个富文本编辑器,结合需求以及以后产品说的可能扩展,最终选择了ueditor 首先就是功能超多,一步到位,估计都不用二次开发就够用了: 使用的话,首先要装包:(npm install ngx-ueditor --save) 然后就是引入到模块,然后配置前端配置项: 这是目录结构(没有在根目录引入,就为了写demo): 接着就是这个 ueditor 这
翻译者:jiong 这个简单的教程,会一步步教你如何在React中进行基本的表单验证。你可以在github上看到所有代码我们使用create-react-app来快速创建并运行简单的react应用程序。从npm安装软件包并创建一个新的应用程序:$ npm install -g create-react-app
$ create-react-app react-form-validation-
转载
2024-10-19 18:19:32
72阅读