自定義input上傳圖片組件,美化樣式
前段時間因為項目需求,做過一個上傳圖片組件,這里分享下大致思路,希望對有需要的人有所幫助~~~
功能需求:1.上傳圖片限制大小、分辨率、類型 2.上傳圖片支持自由裁剪 3.圖片上傳后支持預覽和刪除
效果圖,只截取了一小部分,大致看下就ok啦,是不是感覺比原生的好看多了^_^
項目是基于react框架寫的,話不多說,開始擼代碼~~~
Step1:編寫基礎html結構Step2:基礎樣式// uploadButton組件代碼如下: const uploadButton = ({uploadButton} ); 上傳照片
input-file { width: 0.1px; height: 0.1px; opacity: 0; overflow: hidden; position: absolute; z-index: -1; } .ant-upload { @w: 100px; width: @w; height: @w; padding: 5px; background-color: #fafafa; border: 1px dashed #d9d9d9; border-radius: 4px; display: block; cursor: pointer; position: relative; } .upload-plus-text { width: 100%; text-align: center; position: absolute; left: 0; top: 50%; transform: translateY(-50%); i { font-size: 28px; color: #999; } .ant-upload-text { margin-top: 8px; font-size: 12px; color: #666; } }Step3:添加事件處理
對上傳圖片的類型、大小和分辨率進行檢測
{ this.onFileChange(e); }} />{uploadButton}
代碼較多就不展示了= =,使用的是react-cropper
Step5:預覽和刪除功能預覽功能實現思路就是通過判斷是否已經上傳圖片來展示不同的狀態。未上傳展示uploadButton組件,已上傳就展示imagePreview組件。
通過判斷是否已經上傳圖片來控制input標簽的id屬性值,未上傳圖id="file",已上傳圖片將id="",這樣一來,再次去點擊label的時候由于for屬性找不到對應的id,就不會觸發input上onChange事件
{ this.onFileChange(e); }} />{imageUrl ? imagePreview : uploadButton} // imagePreview組件代碼如下 const imagePreview = ( ); // 預覽圖片 handlePreview() { this.setState({ showPreviewModal: true }); } // 刪除圖片 swapImageFile() { this.setState({ imageUrl: "" }); }
寫在最后:項目涉及代碼較多,文章只展示了大部分代碼,一些具體細節代碼可能就沒有展示了,還望見諒,第一次寫文章,可能比較混亂,有問題還望大家指出~~~ ^_^
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/93056.html
自定義input上傳圖片組件,美化樣式 前段時間因為項目需求,做過一個上傳圖片組件,這里分享下大致思路,希望對有需要的人有所幫助~~~ 功能需求:1.上傳圖片限制大小、分辨率、類型 2.上傳圖片支持自由裁剪 3.圖片上傳后支持預覽和刪除 效果圖,只截取了一小部分,大致看下就ok啦,是不是感覺比原生的好看多了^_^showImg(https://segment...
自定義input上傳圖片組件,美化樣式 前段時間因為項目需求,做過一個上傳圖片組件,這里分享下大致思路,希望對有需要的人有所幫助~~~ 功能需求:1.上傳圖片限制大小、分辨率、類型 2.上傳圖片支持自由裁剪 3.圖片上傳后支持預覽和刪除 效果圖,只截取了一小部分,大致看下就ok啦,是不是感覺比原生的好看多了^_^showImg(https://segment...
1. 安裝依賴 npm i ngx-quill npm i quill ps:一定要安裝 quill ,不然ngx-quill會報Cant resolve quill in xxxx, 因為ngx-quill內部引用了quill。 2. 使用 1. 引用 /* 在自己的`NgModule`的`imports`里面引用,我是在`RoutesModule`里引用的 */ import { Quil...
1. 安裝依賴 npm i ngx-quill npm i quill ps:一定要安裝 quill ,不然ngx-quill會報Cant resolve quill in xxxx, 因為ngx-quill內部引用了quill。 2. 使用 1. 引用 /* 在自己的`NgModule`的`imports`里面引用,我是在`RoutesModule`里引用的 */ import { Quil...
1. 安裝依賴 npm i ngx-quill npm i quill ps:一定要安裝 quill ,不然ngx-quill會報Cant resolve quill in xxxx, 因為ngx-quill內部引用了quill。 2. 使用 1. 引用 /* 在自己的`NgModule`的`imports`里面引用,我是在`RoutesModule`里引用的 */ import { Quil...
閱讀 3398·2023-04-25 22:04
閱讀 2197·2021-11-22 15:29
閱讀 2161·2021-10-11 10:57
閱讀 1402·2021-09-24 09:48
閱讀 3147·2021-09-09 09:34
閱讀 2543·2021-09-02 15:21
閱讀 2393·2019-08-30 15:53
閱讀 1120·2019-08-30 14:07