react中antd Upload手動上傳的示例

更新時間：2022年04月22日 10:36:52 作者：可樂汽水

本文主要介紹了react中antd Upload手動上傳的示例，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

情況介紹

在antd官方提供的upload組件案例中，都使用了action屬性直接上傳，唯一手動上傳的一個例子（如下圖）也不夠好用，可能不能滿足項目的需求，所以我們需要對其進行一些修改，并加入一些別的方法。

我們經(jīng)常會使用antd的form表單上傳數(shù)據(jù)，有時就會需要同時上傳圖片。所以在這里我們需要實現(xiàn)的是，前端頁面上傳多張圖片時，先存儲在前端，當(dāng)表單上傳時，和表單數(shù)據(jù)一起上傳到后端。

實現(xiàn)方法

1.初始化

首先，在最前面引入upload組件，

import { Button, Form, Input, message, Upload} from 'antd';

然后在form中加入upload，

this.state = {
      previewVisible: false,
      previewImage: '',
      fileList: [] //用來存圖片列表
    };

<Form.Item
            name="files"
          >
            <Upload
              listType="picture-card"
              headers={{ 'content-type': 'multipart/form-data' }}
              fileList={fileList}  //存已上傳到頁面的圖片列表
              onPreview={this.handlePreview} //點擊文件鏈接或預(yù)覽圖標(biāo)時的回調(diào)
              onChange={this.handleChange}  //刪除或者新上傳時的回調(diào)
              beforeUpload={() => false}  //上傳文件之前的鉤子，參數(shù)為上傳的文件，若返回 `false` 則停止上傳。我們采用手動上傳。
            >
              {fileList.length >= 1 ? null : (
                <div>
                  <PlusOutlined />
                  <div style={{ marginTop: 8 }}>上傳</div>
                </div>
              )}
            </Upload>
          </Form.Item>

handlePreview = (file) => {
    this.setState({
      previewImage: file.thumbUrl,
      previewVisible: true
    });
  };
handleChange = ({ fileList }) => {
    this.setState({ fileList });
  };

2.上傳表單和圖片

這里我們統(tǒng)一使用json格式進行前后端的交互。由于在form表單中的圖片格式是對象，但是我們不需要對象格式，我們需要的是fileList數(shù)組，所以，我們需要手動將每一張圖片其加入到formData中。

onFinish = (values) => {
    const { fileList } = this.state;
    const formData = new FormData();
      delete values.files; //刪除表單內(nèi)的圖片對象
      for (const key in values) {
        if (values[key] !== undefined && values[key] !== null) {
          formData.append(key, values[key]);
        }
      } //對于其他表單對象，可以直接上傳
      fileList.forEach((item) => formData.append('files', utils.transferFile(item.thumbUrl)));
  };

3.圖片回顯

成功上傳圖片后，由于我這里后端給到前端的圖片格式是base64，圖片不能直接顯示，但是還要考慮到，在編輯表單時，圖片可能還會再上傳，以下是我們的做法。 componentDidMount大家都知道是react生命周期在組件掛載在之后的函數(shù)吧，我們經(jīng)常會將數(shù)據(jù)的一些預(yù)處理放在這里。

下面，我們首先需要調(diào)接口，獲取后臺數(shù)據(jù)。然后修改數(shù)據(jù)格式，將圖片格式改成base64顯示的格式，然后加入到fileList中，就可以將已經(jīng)上傳的圖片重新加入到Upload組件中，實現(xiàn)回顯。并且，后期再次上傳時，也是可以的。

  let { image } = res.data.data;
  let imgArr = image.map((item) => {
    return { thumbUrl: 'data:image/png;base64,' + item };
  });
  this.setState({
    fileList: imgArr
  });

到此這篇關(guān)于react中antd Upload手動上傳的示例的文章就介紹到這了,更多相關(guān)react antd Upload手動上傳內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: