国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

自定義input上傳圖片組件

lemanli / 2373人閱讀

自定義input上傳圖片組件,美化樣式

前段時(shí)間因?yàn)轫?xiàng)目需求，做過(guò)一個(gè)上傳圖片組件，這里分享下大致思路，希望對(duì)有需要的人有所幫助~~~

功能需求：1.上傳圖片限制大小、分辨率、類型
         2.上傳圖片支持自由裁剪
         3.圖片上傳后支持預(yù)覽和刪除

效果圖，只截取了一小部分，大致看下就ok啦，是不是感覺(jué)比原生的好看多了^_^

項(xiàng)目是基于react框架寫的，話不多說(shuō)，開(kāi)始擼代碼~~~

Step1：編寫基礎(chǔ)html結(jié)構(gòu) 

    
    



// uploadButton組件代碼如下: 
const uploadButton = (
      

        
        
上傳照片

      

    );
Step2：基礎(chǔ)樣式 
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:添加事件處理

對(duì)上傳圖片的類型、大小和分辨率進(jìn)行檢測(cè)

 {
    this.onFileChange(e);
  }}
/>
// 一些常量定義 const IMAGE_MIN_WIDTH = 1280; // 上傳圖片最小寬 const IMAGE_MIN_HEIGHT = 800; // 上傳圖片最小高 const IMAGE_MAX_SIZE = 1024 * 1024; // 上傳圖片最大大小 // 處理上傳文件 onFileChange(e) { const file = e.target.files[0]; e.target.value = ""; // 再次上傳同一文件進(jìn)行裁剪 if (this.handleBeforeUpload(file)) { const reader = new FileReader(); reader.onload = e => { const src = e.target.result; const image = new Image(); const _this = this; image.onload = () => { const width = image.width; const height = image.height; if (width >= IMAGE_MIN_WIDTH && height >= IMAGE_MIN_HEIGHT) { _this.setState({ initialImageUrl: src, showCropModal: true }); } else { message.error("照片分辨率小于1280*800"); } }; image.src = src; }; reader.readAsDataURL(file); } } // 檢查照片格式、大小等信息 handleBeforeUpload(file) { if (file) { const sizeOk = file.size < IMAGE_MAX_SIZE; const typeReg = new RegExp(/^image/bmp|gif|jpg|jpeg|png$/, "i"); const typeOk = typeReg.test(file.type); if (!typeOk) { message.error("照片格式有誤"); } else if (!sizeOk) { message.error("照片大小超過(guò)1M"); } return sizeOk && typeOk; } } Step4:裁剪功能

代碼較多就不展示了= =，使用的是react-cropper

Step5:預(yù)覽和刪除功能

預(yù)覽功能實(shí)現(xiàn)思路就是通過(guò)判斷是否已經(jīng)上傳圖片來(lái)展示不同的狀態(tài)。未上傳展示uploadButton組件，已上傳就展示imagePreview組件。
通過(guò)判斷是否已經(jīng)上傳圖片來(lái)控制input標(biāo)簽的id屬性值，未上傳圖id="file",已上傳圖片將id=""，這樣一來(lái)，再次去點(diǎn)擊label的時(shí)候由于for屬性找不到對(duì)應(yīng)的id，就不會(huì)觸發(fā)input上onChange事件


     {
        this.onFileChange(e);
      }}
    />
    



  

// imagePreview組件代碼如下
const imagePreview = (
  
);
   
// 預(yù)覽圖片
handlePreview() {
  this.setState({
    showPreviewModal: true
  });
}

// 刪除圖片
swapImageFile() {
  this.setState({ imageUrl: "" });
}

寫在最后：項(xiàng)目涉及代碼較多，文章只展示了大部分代碼，一些具體細(xì)節(jié)代碼可能就沒(méi)有展示了，還望見(jiàn)諒，第一次寫文章，可能比較混亂，有問(wèn)題還望大家指出~~~ ^_^

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/51922.html

相關(guān)文章

  • 自定義input上傳圖片組件

    自定義input上傳圖片組件,美化樣式 前段時(shí)間因?yàn)轫?xiàng)目需求，做過(guò)一個(gè)上傳圖片組件，這里分享下大致思路，希望對(duì)有需要的人有所幫助~~~ 功能需求：1.上傳圖片限制大小、分辨率、類型 2.上傳圖片支持自由裁剪 3.圖片上傳后支持預(yù)覽和刪除 效果圖，只截取了一小部分，大致看下就ok啦，是不是感覺(jué)比原生的好看多了^_^showImg(https://segment...

    marek 評(píng)論0 收藏0

  • 自定義input上傳圖片組件

    自定義input上傳圖片組件,美化樣式 前段時(shí)間因?yàn)轫?xiàng)目需求，做過(guò)一個(gè)上傳圖片組件，這里分享下大致思路，希望對(duì)有需要的人有所幫助~~~ 功能需求：1.上傳圖片限制大小、分辨率、類型 2.上傳圖片支持自由裁剪 3.圖片上傳后支持預(yù)覽和刪除 效果圖，只截取了一小部分，大致看下就ok啦，是不是感覺(jué)比原生的好看多了^_^showImg(https://segment...

    zhongmeizhi 評(píng)論0 收藏0

  • angular引入富文本ngx-quill，自定義圖片上傳（解決Can't resolve

    1. 安裝依賴 npm i ngx-quill npm i quill ps：一定要安裝 quill ，不然ngx-quill會(huì)報(bào)Cant resolve quill in xxxx, 因?yàn)閚gx-quill內(nèi)部引用了quill。 2. 使用 1. 引用 /* 在自己的`NgModule`的`imports`里面引用，我是在`RoutesModule`里引用的 */ import { Quil...

    willin 評(píng)論0 收藏0

  • angular引入富文本ngx-quill，自定義圖片上傳（解決Can't resolve

    1. 安裝依賴 npm i ngx-quill npm i quill ps：一定要安裝 quill ，不然ngx-quill會(huì)報(bào)Cant resolve quill in xxxx, 因?yàn)閚gx-quill內(nèi)部引用了quill。 2. 使用 1. 引用 /* 在自己的`NgModule`的`imports`里面引用，我是在`RoutesModule`里引用的 */ import { Quil...

    honmaple 評(píng)論0 收藏0

  • angular引入富文本ngx-quill，自定義圖片上傳（解決Can't resolve

    1. 安裝依賴 npm i ngx-quill npm i quill ps：一定要安裝 quill ，不然ngx-quill會(huì)報(bào)Cant resolve quill in xxxx, 因?yàn)閚gx-quill內(nèi)部引用了quill。 2. 使用 1. 引用 /* 在自己的`NgModule`的`imports`里面引用，我是在`RoutesModule`里引用的 */ import { Quil...

    hlcc 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<