快捷導(dǎo)航

react中antd Upload手動(dòng)上傳的示例

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

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

情況介紹

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

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

實(shí)現(xiàn)方法

1.初始化

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

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

然后在form中加入upload，

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

<Form.Item
            name="files"
          >
            <Upload
              listType="picture-card"
              headers={{ 'content-type': 'multipart/form-data' }}
              fileList={fileList}  //存已上傳到頁(yè)面的圖片列表
              onPreview={this.handlePreview} //點(diǎn)擊文件鏈接或預(yù)覽圖標(biāo)時(shí)的回調(diào)
              onChange={this.handleChange}  //刪除或者新上傳時(shí)的回調(diào)
              beforeUpload={() => false}  //上傳文件之前的鉤子，參數(shù)為上傳的文件，若返回 `false` 則停止上傳。我們采用手動(dòng)上傳。
            >
              {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格式進(jìn)行前后端的交互。由于在form表單中的圖片格式是對(duì)象，但是我們不需要對(duì)象格式，我們需要的是fileList數(shù)組，所以，我們需要手動(dòng)將每一張圖片其加入到formData中。

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

3.圖片回顯

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

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

  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手動(dòng)上傳的示例的文章就介紹到這了,更多相關(guān)react antd Upload手動(dòng)上傳內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: