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

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

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

前言

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

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


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

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

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

利用Modal顯示圖片。

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

數(shù)據(jù)改變時直接重設(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://systransis.cn/yun/100130.html

相關(guān)文章

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

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

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

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

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

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

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

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

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

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

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