Ant Design Upload 組件之手動上傳

在ant design中提供了一個文件上傳的組件Upload,能夠方便地把本地的文件上傳到服務器。可是antd 的官方例子中給的都是當點擊上傳的時候直接把圖片上傳到服務器，但是在實際的業務中，咱們可能會須要實如今點擊上傳的時候不會立馬發送請求把圖片或者文件上傳到服務器，而是須要在適當的時候提交或者和其餘的數據一塊兒提交。那麼此時默認的上傳行爲就行不通了，咱們就須要手動控制文件的上傳時機。

假如如今咱們的需求是點擊頁面中的上傳按鈕，出現一個彈窗，在彈窗咱們上傳須要的圖片但並不直接上傳到服務器，當點擊彈窗的肯定按鈕時，纔將上傳的文件發送到服務器。相似這樣的：

那麼該如何實現呢？接下來咱們就一步步來看。

第一步：阻止默認的上傳事件
Upload組件中提供了一個上傳前的鉤子函數beforeUpload,當這個鉤子函數返回false的時候，默認上傳行爲就會被阻止。那麼咱們能夠把代碼寫成這樣。

beforeUpload: (file) => {
     let files = [];
     this.setState({
         fileList: [...files]
     })
     return false;
},

看起來好像時沒有問題的，可是當咱們在頁面點擊上傳的時候，咱們會發現，圖片沒有展現出來。這是爲何呢，咱們把上傳的圖片信息打印出來：

不難發現，在beforeUpload中打印出的file的信息裏面並無圖片的路徑地址，因此圖片展現不出來。因此咱們須要用FileReader來獲取圖片的地址。代碼以下：

const reader = new FileReader();
                reader.readAsDataURL(file);
                reader.onload = e => {
                    file.thumbUrl = e.target.result;
                    files.push(file)
                    files.map((item, index) => {
                        if (file.name === item.name) {
                            count.push(index);
                            if (count.length > 1) {
                                message.error("文件已存在!");
                                files.splice(index, 1);
                                return;
                            }
                        }
                    })
                    this.setState({
                        fileList: [...files]
                    })
                    this.props.onChange(this.state.fileList)
              };

這段代碼的做用就在於讀取到上傳的圖片的路徑地址，而且把它賦給文件的thumbUrl，這樣頁面中既能夠展現上傳的圖片，又阻止了圖片的默認上傳行爲。

第二步：手動上傳，在須要的時候上傳文件
如今圖片已經展現出來了，我但願在點擊Modal的確認按鈕時，把當前的文件信息上傳到服務器。

由於上傳的圖片應該是一個file文件，因此咱們須要的是new FormData(),代碼以下：

const formData = new FormData();
        fileList.forEach((file) => {
          formData.append('files[]', file);
        });

接着咱們就能夠在請求中把當前的formData做爲參數傳給後端了。

須要注意的是：在請求的時候不要攜帶content-type,瀏覽器會根據當前的文件格式自動添加content-type爲multipart/form-data，若是手動設置了content-type，傳輸的文件格式就不是multipart/form-data了。

完整代碼請參考：https://github.com/qidaiqiji/...