react图片上传

A. react-narive项目 上传图片怎么做

可以用js的上传图片方法（可将图片转化为压缩文件上传）：网页链接

B. 在 react 项目中使用微信 JS-SDK 填坑笔记

现在 android 的微信（6.3.31）已经修好了，需要按照文档说的传入当前页面的url，也就是没吃豆重新 config 一次，但是苹果的微信只要在进入页面的时候 config 一次就可以了，微信管接口的估计是个锤子。

在做图片上传的时候，图片太大老是上传失败，在产品汪（☁️）的建议下用了微信的 JS-SDK，微信会处理压缩，而且还有顺带连预览也解决了，好开心。

后来一发布，整组人感觉不好了。主要问题出现在 url 的配置上。

微信的 官方文档 是这样说的:

实际测试中发现，配置的 url 并不是调用微信 js 的时候所在页面的地址（也就是通过 location.href 获得的地址），而是在进入到网站的第一个页面的地址，这是第一个问题

第二问题是在苹果手机的微信上面，只要调用 wx.config 一次就可以了，但是在 android 的手机，在页面跳转之后，要重新调用 wx.config （url 依然是进入网站的第一个页面的地址，要保存在一个变量里面），"X5 浏览器"， 我他妈就呵呵了。如果用了 react-router 的话，直接在 Route 组件上绑定一个 onChange 方法就可以了

C. React 使用Upload插件上传读取文件内容

某一天，公司里需要一个功能，一个可以把一份参数多如牛毛的配置文件本地存储下来，本地也可以把文件读取出来这样便利的功能。分析一下这个需求，主要就是要以json的格式，保存，和web页面读取json文件的这样两个功能。公司的工程是react编写的，可能对vue和原生js都有一定了解的你，对react并不熟悉，那么，如何解决这个问题

首先，我们假定拿到了一个json格式的变量

那么，再写一个download的工具类

发现问题！直接download下来的是没有格式化过的文本，乱成一团，毫无可读性可言。一个formatjson非常重要！

一行调用！

react有很多轮子，upload当然也有相应封装好的工具，引入！
（在这之前别忘了npm install react-fileupload -save）

写一份配置文件，这个文件中写出的API这边有 https://www.jianshu.com/p/3aa9d5ad41b0

操作在那边已经很清晰啦，我就不多说了

拿到文件之后，当然要把文件内容在web上就解析出来

好啦，fileContent就是里面的内容，json对象，拿到之后，就可以为所欲为了！

D. 在REACT里怎么引用图片了

引用本地图片的话
第一种导入图片路径
import Img from "./images/1.png"
<img src={Img} alt=""/>
第二种直接获取图片<img src={require("./images/1.png")} alt=""/>
如果是背景图的话操作style
style={{background:`url(${require("./images/1.png")})` }}
${}为字符串模板,要用反引号``

E. react-ts-腾讯云上传功能使用步骤

1.安装cos-js-sdk-v5包，使用npm或yarn add

2.注册腾讯云 创建一个储存桶

目的：获得

3.查看腾讯云官方文档javascript SDK

eg：腾讯提供的上传接口

引入uuid包生成唯一id（因为腾讯云对象键key是唯一值）；

F. React 使用antd imagePicker选择并上传图片

使用antd-mobile的ImagePicker组件实现图片的上传

ImagePicker 图片选择器

e.target.files[0]层层剖析

G. React.js 小书 - 介绍

在线阅读： http://huziketang.com/books/react/

这是一本关于 React.js 的小书。

因为工作中一直在使用 React.js，也一直以来想总结一下自己关于 React.js 的一些知识、经验。于是把一些想法慢慢整理书写下来，做成一本开源、专业、简单的入门级别的小书，提供给社区。希望能够帮助到更多 React.js 刚入门朋友。

由于水平有限，编写的过程难免会有诸多错误，也希望大家在看的过程中发现了问题，可以在 Github 上给该项目发 Pull Request。衷心希望可以有更多的人参与到本书的编写当中。

（本书的后续可能会做成视频版本，敬请期待。）

本书为有一点前端基础的并且是 React.js 零基础的同学而作，帮助他们掌握 React.js 并且灵活地把 React.js 应用到实际项目当中。如果你有一定的 HTML、CSS、JavaScript 基础并且希望学习 React.js，而又觉得 React.js 当中有些概念比难以接受和理解，希望能够从零开始学习，那么本书很适合你。但如果你已经对前端已经非常熟悉并且用过不少的前端框架和相关的组件化技术，建议你直接看官网文档。

本书并不会文档式地包含所有知识点，只会提炼实战经验中基础的、重要的、频繁的知识进行重点讲解，让你能用最少的精力深入了解实战中最需要的 React.js 知识和套路，轻装上路。如果需要更多更全面的知识点，可以参看更多的官方文档或者其他丰富的资料。

另外，本书全书采用 ECMAScript 2015，阅读之前请确保自己已经掌握了 ECMAScript 2015 的基本语法，否则阅读起来会非常困难。

本书初定分为三个阶段，每个阶段最后会有实战分析，把该阶段的知识点应用起来。

第一个阶段 ：希望能让读者掌握 React.js 的基本概念和基础知识。包括问题的根源：前端组件的复用性问题、数据和视图的同步问题。了解清楚问题以后再了解 React.js 的基础知识，包括 JSX、事件监听、state、props、列表渲染等。看看 React.js 是怎么解决这些问题的。这个阶段结束以后，读者就可以可以运用 React.js 构建简单的页面功能。

第二个阶段 ：让读者更进一步了解 React.js，包括组件生命周期及其含义、state 和 props 的进阶概念、props 验证及其意义、组件组合进阶、如何和 DOM 打交道、并且开始引入前端应用状态管理所存在的问题。

第三个阶段 ：让读者掌握 React.js 较为高级的概念，包括高阶组件、context。并且尝试引入 React-router、rex 来协助我们构建较为完整的前端应用；还会开始深入讨论前端应用状态管理的问题。

第一个阶段

[图片上传失败...(image-623c7d-1510227273169)]

第二个阶段

[图片上传失败...(image-54e0d3-1510227273169)]

第三个阶段

特别感谢以下朋友对本书所做的审校工作，给本书提出了很多宝贵的改进意见：

本作品采用 署名-禁止演绎 4.0 国际许可协议 进行许可

H. 记一下在react中使用braft-editor富文本编辑器踩的坑

【react】、【ts】、【braft-editor】
最近有一个需要使用富文本的需求，在网上找到了braft-editor，这是一个文档比较全面，使用灵活、简单的富文本编辑器。具体使用可以参考官方文档。
braft-editor官网：
https://braft.margox.cn/
集成Ant Design上传组件：
https://braft.margox.cn/demos/antd-upload

自己的笔记，在使用braft-editor遇到的或感觉可能别人会遇到的坑，希望能有一点帮助。

1、初始化的时候最好创建一个富文本对象，别用null代替
editorState: BraftEditor.createEditorState('<p></p>'), // 富文本对象

这里，我之前按照官网写的，用的null，在结合antd上传时，遇到了Cannot read property 'getSelection' of null的报错。

在结合源码debugger之后，发现传过去的editorState对象是空。

其原因为：由于之前editorState初始化是null，其创建是在文本改变之后，第一次在未创建editorState对象时，调用上传图片回调，此时，必然也是null，故报错。

2、braft-editor默认会将图片转为base64，不想转，需要自定义图片上传按钮
extendControls、controls都可以实现自定义按钮
上传可以用antd的upload，braft-editor官网有结合antd的upload的例子

3、使用官网例子，创建带antd upload的富文本时，出现的两个常见错误
（1）没有braft-utils、braft-finder包
这两个包需要自行安装，官网文档没提。

安装包后，我们神奇的发现，这俩包还是不能使用

原因：上面装的两个包是js的包，可以自行去装ts的包或者通过配置实现

在文件中添加：

（2）'{ key: string; type: string; component: Element; }[]' is not assignable to type 'ExtendControlType[]'

【解决方案】ts报错，在定义extendControls处，加一个：any
【修改前】

以上就是这次总结的坑。

ps：官网列子中，新增图片按钮使用了Icon组建，这个在现在项目中是没有的，自行换一个图标。

I. 如何制作react组件包上传到npm

虽说现在市面上组件库相当多了，但是还有一些组件特定场景市面上没有，公司内部一些不同项目，有类似相同组件可以直接复用，避免重复造轮子，就可以直接制作一个npm包，下次直接使用。

注意：文中的每一步都很重要，都是踩过的坑

1、注册npm账号
地址： https://www.npmjs.com/signup
注意：注册完后，记得验证你的邮件地址！一定！否则会在提交组件包的时候报403错误，那是因为没有验证你的邮箱。

1、创建新的文件夹
2、进入该文件夹，使用cmd命令，npm进入安装项目流程

3、对应的字段：

有需要可以自行安装自己要的依赖，上面几个是我写组件必要的几个依赖，因为我没有写对应的依赖版本所以安装时候会以最新版本安装。

1、新建如下目录结构和文件

2、编写webpack.config.js的配置，以下是最基础的配置

上面的less-loader没有启用lessmoles模块化比较不好，假设现在项目有好几个组件，那么模块化就可以避免我们不同组件的样式污染，如果不开启就不生效，如下例子：

所以得将webpack.config.js修改如下：

接下来往babel.config.js添加编译时候需要的loader配置：

3、编写组件
这个是核心部分，就是说这里是你的组件
------------- ./src/index.jsx

------------- ./src/index.less

4、对外暴露组件，编辑根目录下的index.js文件
我这里叫Test，使用组件包引入时候就是Test组件。别人在引用组件包时候会从该文件作为入口（package.json的main字段可以配置），这个文件有两种写法，第一种：

第二种：

5、编写webpack读取的入口文件 public/app.js
webpack启动、编译、打包都会从这个文件作为入口（webpack那边配置的）

6、编写html模板，public/index.html文件。
我们知道spa单页面都是依据一个html模板上面引入js创建虚拟dom生成到这个html上面，所以需要有一个挂载的实例模板。

7、编写.gitignore文件
这个文件可以配置git上传时候忽略哪些文件不想传上去，同时发布组件包的时候它也会按照这个文件来，忽略哪些不上传。

8、添加项目启动命令：修改package.json文件
给该文件的scripts里添加两个系统命令，一个是启动命令，一个是打包命令（制作组件包用的比较少）。注意webpack4的版本可能不是 webpack server --mode development，这个需要自己对应版本。

说明是node版本问题，需要安装高点版本的node，可以使用nvm来管理node版本，这里不多说，我切换为node 12.0.0版本就可以。

到此为止，我们已经配置好了工程，接下来需要把组件包发布上去
1、发布规则

例如你是淘宝源你需要：
查看设置过的所有的源：npm config get registry
设置当前源为npm： npm config set registry https://registry.npmjs.org/
发布完成后设置回淘宝源：npm config set registry https://registry.npm.taobao.org

2、发布流程
1、登录注册好的npm账号：npm login
输入对应的账号、密码、邮箱即可