本篇內(nèi)容介紹了“react如何實現(xiàn)文件上傳”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

成都創(chuàng)新互聯(lián)長期為上1000+客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊從業(yè)經(jīng)驗10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為陽高企業(yè)提供專業(yè)的做網(wǎng)站、成都網(wǎng)站建設(shè)，陽高網(wǎng)站改版等技術(shù)服務(wù)。擁有十載豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。

react實現(xiàn)文件上傳的方法：1、通過“import { Table, Button, Modal, Form, Input, Upload, Icon, notification } from 'antd';”引入所需antd的部件；2、通過“handleOk = e => {const { fileList } = this.state...}”實現(xiàn)提交表單并上傳文件即可。

react使用antd實現(xiàn)手動上傳文件（提交表單）

1.要實現(xiàn)的效果

2.實現(xiàn)步驟

1.引入所需antd的部件

import { Table, Button, Modal, Form, Input, Upload, Icon, notification } from 'antd';

這個是表單的

 <Modal
          title="文件上傳"
          visible={this.state.visible}
          onOk={this.handleOk} //點擊按鈕提價表單并上傳文件
          onCancel={this.handleCancel}
        >
          <Form layout="vertical" onSubmit={this.handleSubmit}>
            <Form.Item>
              <div  key={Math.random()}>//點擊關(guān)閉在次打開還會有上次上傳文件的緩存
                <Upload {...props}>
                  <Button type="primary">
                    <Icon type="upload" />選擇文件
                 </Button>
                </Upload>
 
              </div>
            </Form.Item>
            <Form.Item label="文件名(可更改)">
              {getFieldDecorator('filename', {
                // initialValue:this.state.defEmail,
                rules: [
                  {
                    message: '請輸入正確的文件名',
                    // pattern: /^[0-9]+$/,
                  },
                  {
                    required: true,
                    message: '請輸入文件名',
                  },
                ],
              })(<Input />)}
            </Form.Item>
            <Form.Item label="描述(選填)">
              {getFieldDecorator('describe', {
 
                rules: [
                  {
                    message: '描述不能為空',
                  },
                  {
                    required: false,
                    message: '請輸入描述',
                  },
                ],
              })(<TextArea />)}
            </Form.Item>
            <Form.Item label="文件類型">
              {getFieldDecorator('filetype', {
                rules: [
                  {
                    message: '文件類型',
                  },
                  {
                    required: true,
                    message: '文件類型',
                  },
                ],
              })(<Input disabled={true} />)}
            </Form.Item>
          </Form>
        </Modal>

下面的代碼是Upload的props

  const props = {
      showUploadList: true,
      onRemove: file => {
        this.setState(state => {
          const index = state.fileList.indexOf(file);
          const newFileList = state.fileList.slice();
          newFileList.splice(index, 1);
          return {
            fileList: newFileList,
          };
        });
      },
      beforeUpload: file => {
        console.log(file)
        let { name } = file;
        var fileExtension = name.substring(name.lastIndexOf('.') + 1);//截取文件后綴名
        this.props.form.setFieldsValue({ 'filename': name, 'filetype': fileExtension });//選擇完文件后把文件名和后綴名自動填入表單
        this.setState(state => ({
          fileList: [...state.fileList, file],
        }));
        return false;
      },
      fileList,
    };

下面是重點提交表單并上傳文件

handleOk = e => {//點擊ok確認(rèn)上傳
    const { fileList } = this.state;
    let formData = new FormData();
    fileList.forEach(file => {
      formData.append('file', file);
    });
 
    this.props.form.validateFields((err, values) => { //獲取表單值
      let { filename, filetype, describe } = values;
      formData.append('name', filename);
      formData.append('type', filetype);
      formData.append("dir", "1");
      if(describe==undefined){
        formData.append('description',"");
      }else{
        formData.append('description',describe);
      }
      
      UploadFile(formData).then(res => { //這個是請求
        if (res.status == 200 && res.data != undefined) {
          notification.success({
            message: "上傳成功",
            description: res.data,
          });
        } else {
          notification.error({
            message: "上傳失敗",
            description: res.status,
          });
        }
      })
      this.setState({
        visible: false
      });
 
    })
  };

注意我用的axios,post必須使用formData.append（"接口參數(shù)名"，“要傳的值”）；如果不想用axios還可以用別的請求

fetch(url, { //fetch請求
        method: 'POST',
        body: formData,
    })
 
 
 
 
 
 
      axios({ //axios
        method: 'post',
        url: url,
        data: formData,
        headers:{ //可加可不加
          'Content-Type': 'multipart/form-data; boundary=---- 
           WebKitFormBoundary6jwpHyBuz5iALV7b'
        }
    })
    .then(function (response) {
        console.log(response);
    })
    .catch(function (error) {
        console.log(error);
    });

這樣就能實現(xiàn)手動上傳文件了。

3.遇到的坑

第一次選擇完文件，點擊上傳。第二次在打開Model發(fā)現(xiàn)上回的文件列表還在，我在網(wǎng)上找的方法是給upload及一個key值但只有點擊ok后第二次打開Model緩存才會消失，但是點擊canel還會存在。

<div key={Math.random()}>
                <Upload  {...props}>
                  <Button type="primary">
                    <Icon type="upload" />選擇文件
                 </Button>
                </Upload>
 
              </div>

最好的方法就是this.setState把state里文件列表置空

 this.props.form.resetFields()//添加之前把input值清空
    this.setState({
      visible: true,
      fileList: [] //把文件列表清空
    });

也可以給Modal加一個 destroyOnClose 屬性  關(guān)閉時銷毀 Modal 里的子元素。

“react如何實現(xiàn)文件上傳”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！

網(wǎng)站題目：react如何實現(xiàn)文件上傳
標(biāo)題URL：http://chinadenli.net/article10/giiigo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供云服務(wù)器、小程序開發(fā)、網(wǎng)站排名、營銷型網(wǎng)站建設(shè)、品牌網(wǎng)站建設(shè)、虛擬主機(jī)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)