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
輸入對應的賬號、密碼、郵箱即可