antd組件Upload實現自己上傳

wangtdgoodluck 發布于2019-08-23 14:07 / 1907人閱讀

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

前言

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

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


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

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

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

利用Modal顯示圖片。

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

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

最后是fileList的一些基本設置：

fileList: [{
          uid: "id",
          name: "標題",
          //目前的狀態
          status: "done",
          //圖片的url或者base64
          url: "",
          type: "image/jpeg",
        }],

GPU云服務器云服務器監控自己組件服務器上傳組件 asp上傳組件 html上傳組件代碼

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/100130.html

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

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

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

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

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

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

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

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

chanthuang 2019-05-21 16:37 評論0 收藏0
前端實現Excel導入和導出功能

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

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