上傳圖片時顯示進度條 ( react )

呼叫api上傳圖片時候如果要顯示進度條,目前有兩種方式可以加入偵聽事件,

  1. 使用js原生的 XMLHttpRequest
  2. 使用axios

其實axios也只是把偵聽事件的名稱改掉而已,背後做法應該是一樣的XD

閱讀更多
0

react 使用前端Post方法串接電子地圖

我們在串接綠界資訊的時候,遇到一個問題就是綠界的文件上寫,此方法要使用前端的post方法,但是我用call api的post方法去打,卻回應跨域錯誤,寫信綠問綠界,又一問三不知~

好在後來終於被後端工程師提醒才明白,在上古時期的網頁開發是沒有分前後端的,所以post方法都是用<form>標籤去做,我整個大開眼界欸,雖然還不懂這其中的差別,但總歸是成功了。

閱讀更多
2+

react 打開裝置相機鏡頭拍照,並儲存照片

網頁需要用到相機的場景還滿多的,像是身份驗證需要拍證件照上傳、發文、留言,是很基本的網頁應用。

閱讀更多
1+

react 輪播圖套件

material ui 框架沒有提供輪播圖 component,需要另外安裝套件,這邊介紹一個我常用的套件 React Slick,剛好他也有出 react 版本。

閱讀更多
0

Material-ui Textfield select 組件搭配 react-hook-form 無法指定defaultvalue 問題

如題,使用 Textfield 的 select 組件時,我們會想預先設定已選取的項目,但是我們指定了,畫面上的 input 卻還是沒有選起來的樣式。

閱讀更多
0

使用 ThirdWeb 製作自己的 NFT Mint Site

搭上NFT熱潮,發現有一些網站開始主打不用自己寫智能合約,也可以製作NFT,ThirdWeb就是其中一個。

但我們用ThirdWeb上傳好NFT之後,看到他提供給消費者Mint的介面有點陽春,好在他們本來就是主打可以自己使用api的方式去打他們的各種功能,例如Mint、連結錢包、查詢NFT數量之類的。

閱讀更多
0

next.js 串接 google recaptcha verify2 invisible

我不是機器人驗證,在一些敏感資訊的交互時候可以加上,確保操作者確實是本人。

驗證方式Google有提供兩個版本:v2、v3

其中v2版本又分為:checkbox(就是會有一個勾勾要打勾選我不是機器人)、invisible(從背景打api驗證送給後端)

閱讀更多
0

在 next.js 中使用巢狀的 layout

通常我們的網站會有Topbar、Footer之類的,在next.js專案中我們會把這樣的layout寫在一起:

閱讀更多
0

使用 Doceker 打包前端 next.js 專案

使用 next.js 製作網站不外乎就是為了 ssr 這個重點,因為一般的 SPA 網站像是純 react 或 vue,是沒有 seo 的,也就是當我們做好網站,google 搜尋引擎是搜尋不到你的內容的。

閱讀更多
0