antd組件Upload實(shí)現(xiàn)自己上傳

wangtdgoodluck 發(fā)布于2019-08-23 14:07 / 1972人閱讀

摘要：前言在實(shí)現(xiàn)圖片上傳時(shí)，可能需要用到，但是它默認(rèn)的上傳方式是加入圖片后直接上傳，如果要實(shí)現(xiàn)最后再一次性上傳，需要自定義內(nèi)容。還有一個(gè)移除時(shí)調(diào)用的函數(shù)，即點(diǎn)擊上圖的垃圾桶，這里沒有定義。最后是的一些基本設(shè)置標(biāo)題目前的狀態(tài)圖片的或者

前言

在實(shí)現(xiàn)圖片上傳時(shí)，可能需要用到Upload，但是它默認(rèn)的上傳方式是加入圖片后直接上傳，如果要實(shí)現(xiàn)最后再一次性上傳，需要自定義內(nèi)容。

//添加按鈕的樣式
const uploadButton = (
      
        
        Upload
      
 );


 false}
              //數(shù)據(jù)，即圖片，是一個(gè)數(shù)組
              fileList={fileList}
              //當(dāng)點(diǎn)擊查看時(shí)調(diào)用（上圖的那個(gè)眼睛）
              onPreview={this.handlePreview}
              //數(shù)據(jù)改變時(shí)調(diào)用
              onChange={this.handleChange}
            >
              //當(dāng)不少于一張圖時(shí)，不顯示怎加圖片的按鈕。
              {fileList.length >= 1 ? null : uploadButton}

還有一個(gè)移除時(shí)調(diào)用的函數(shù)onRemove()，即點(diǎn)擊上圖的垃圾桶，這里沒有定義。

  handlePreview = (file) => {
    this.setState({
      previewImage: file.url || file.thumbUrl,
      visible: true,
    });
  };

利用Modal顯示圖片。

handleChange = ({ fileList }) => {
    this.setState({ fileList });
};

數(shù)據(jù)改變時(shí)直接重設(shè)fileList數(shù)組的值（我這里只有一張圖可以這么做）。

最后是fileList的一些基本設(shè)置：

fileList: [{
          uid: "id",
          name: "標(biāo)題",
          //目前的狀態(tài)
          status: "done",
          //圖片的url或者base64
          url: "",
          type: "image/jpeg",
        }],

GPU云服務(wù)器云服務(wù)器監(jiān)控自己組件服務(wù)器上傳組件 asp上傳組件 html上傳組件代碼

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

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/100130.html

相關(guān)文章

antd 和 element上傳文件詳解與FormData詳解

摘要：當(dāng)用戶完成選擇文件動(dòng)作時(shí)，提交子頁面中的。從此我們上傳文件就歡欣鼓舞的來找了。因?yàn)榈暮诵氖菍ο螅惒降膶?shí)現(xiàn)是通過一個(gè)對象，一般簡稱該對象對。這些回答基于自己理解，如有不妥，希望路過的大神輕噴，指正。背景平時(shí)工作中經(jīng)常會(huì)遇到需要上傳文件的情況，如果你用ant design 或者element ,它們都提供了上傳的組件。我們分別來看一下element 和 antd 手動(dòng)上傳怎么處理：...

Fundebug 2019-08-23 10:29 評論0 收藏0
10 分鐘使用 Spring Boot + Vue + Antd + US3 搭建自己的圖床

摘要：網(wǎng)上已經(jīng)一些運(yùn)行不錯(cuò)的圖床了，比如圖殼路過圖床那為什么我們還要自己搭建圖床呢一來是因?yàn)榇a農(nóng)總是喜歡折騰，二來是有了自己的圖床數(shù)據(jù)自己存儲更安全。下面是演示地址，可以先看一下搭建完成的效果。我們是以作為原型進(jìn)行搭建。網(wǎng)上已經(jīng)一些運(yùn)行不錯(cuò)的圖床了，比如SM.MS https://sm.ms/圖殼 https://imgkr.com路過圖床 https://imgchr.com/那為什么我們還要自...

Tecode 2022-06-28 18:59 評論0 收藏0
babel在提升前端效率的實(shí)踐

摘要：配置涵蓋了目前的業(yè)務(wù)場景的基本需求，但是可擴(kuò)展性很低。最終決定采用的生態(tài)鏈來解決上述遇到的問題。在指定的路徑下寫入對應(yīng)的文件。大綱遇到的問題場景及解決方案對比什么是babel？解決過程目前遺留的問題目前實(shí)現(xiàn)功能API 參考遇到的問題場景及解決方案對比我們目前采用的是antd + react(umi)的框架做業(yè)務(wù)開發(fā)。在業(yè)務(wù)開發(fā)過程中會(huì)有較多頻繁出現(xiàn)并且相似度很高的場...

huayeluoliuhen 2019-08-26 13:51 評論0 收藏0
Babel 在提升前端效率的實(shí)踐

摘要：經(jīng)過一周左右的時(shí)間完成了基礎(chǔ)組件的編寫。配置涵蓋了目前的業(yè)務(wù)場景的基本需求，但是可擴(kuò)展性很低。最終決定采用的生態(tài)鏈來解決上述遇到的問題。在指定的路徑下寫入對應(yīng)的文件。大綱遇到的問題場景及解決方案對比什么是babel？解決過程目前遺留的問題目前實(shí)現(xiàn)功能API 參考遇到的問題場景及解決方案對比我們目前采用的是antd + react(umi)的框架做業(yè)務(wù)開發(fā)。在業(yè)務(wù)開發(fā)過程中會(huì)...

chanthuang 2019-05-21 16:37 評論0 收藏0
前端實(shí)現(xiàn)Excel導(dǎo)入和導(dǎo)出功能

摘要：介紹最近項(xiàng)目中讓實(shí)現(xiàn)一個(gè)導(dǎo)入導(dǎo)出的功能，查找了一些插件后發(fā)現(xiàn)這個(gè)插件，所以就嘗試使用了一下，這里將使用方法和遇到的問題簡單記錄一下。介紹最近項(xiàng)目中讓實(shí)現(xiàn)一個(gè)導(dǎo)入導(dǎo)出Excel的功能，查找了一些插件后發(fā)現(xiàn)js-xlsx這個(gè)插件，所以就嘗試使用了一下，這里將使用方法和遇到的問題簡單記錄一下。 SheetJS js-xlsx 是一款能夠讀寫多種格式表格的插件，瀏覽器支持良好，并且能在多個(gè)...

Amio 2019-08-23 14:55 評論0 收藏0