欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

antd Upload 文件上傳的示例代碼

 更新時(shí)間：2018年12月14日 14:30:51   作者：Lily_miao  
這篇文章主要介紹了antd Upload 文件上傳的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

1.antd官網(wǎng)Upload組件：

https://ant.design/components/upload-cn/

2.下圖是最近開(kāi)發(fā)的上傳文檔的效果：

3.文件上傳的實(shí)現(xiàn)：

（1）方法一：antd默認(rèn)上傳。

a：渲染文件上傳組件。getPDFURL（）方法為實(shí)現(xiàn)文件的上傳。showUploadList為是否展示 uploadList, true顯示，false不顯示，其可設(shè)為一個(gè)對(duì)象，用于單獨(dú)設(shè)定 showPreviewIcon 和 showRemoveIcon。type為上傳按鈕的圖標(biāo)。如下圖所示。

{/* 渲染文件上傳組件 */}
 <Upload {...this.getPdfURL()} showUploadList={false}>
  <Button>
  <Icon type="upload" /> 上傳文件
  </Button>
 </Upload>

b：getPDFURL（）方法為實(shí)現(xiàn)文件的上傳。name是發(fā)到后臺(tái)的文件參數(shù)名。action為上傳文件的地址。accept是接受上傳的文件類型。headers是設(shè)置上傳的請(qǐng)求頭部，IE10 以上有效。onChange是上傳文件改變時(shí)的狀態(tài)。代碼如下圖所示。

下面為代碼：

getPdfURL = () =>{
  const _this = this;
  const props = {
   name: 'file',
   action: AjaxUrl + 'data/modelFileUpload.svt?cou_id=' + this.state.cou_id,{/*文件上傳接口和需要的傳參*/}
   accept:"application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document",{/*接受上傳的文件類型：此處為.doc格式*/}
   headers: {
    authorization: 'authorization-text',
   },
   onChange(info) {//上傳文件改變時(shí)的狀態(tài)
    if (info.file.status !== 'uploading') {
     console.log(info.file, info.fileList);
    }
    if (info.file.status === 'done') {
     message.success(`${info.file.name} 上傳成功！`);
     _this.setState({
      pdfUrl:AjaxUrl + info.file.response.url,
      wordName:info.file.response.wordName
     })
 
    } else if (info.file.status === 'error') {
     message.error(`${info.file.name} 上傳失??！`);
    }
   },
  };
  return props;
 }

注意：accept可以用于設(shè)置接口不同類型的文件類型

（2）方法二：使用customRequest通過(guò)覆蓋默認(rèn)的上傳行為，自定義自己的上傳實(shí)現(xiàn)。

a：渲染文件上傳組件。accept是接受上傳的文件類型。customRequest通過(guò)覆蓋默認(rèn)的上傳行為，customRequest（）方法是自定義自己的上傳實(shí)現(xiàn)。fileList是已經(jīng)上傳的文件列表（受控）。

<Upload
  accept="application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"
  customRequest={this.customRequest}
  beforeUpload = {this.beforeUpload}
  fileList={this.state.fileList}
    >
  <Button>
  <Icon type='upload' />上傳
  </Button>
</Upload>

b：customRequest（）方法是自定義自己的上傳實(shí)現(xiàn)。 

customRequest = (option)=> {
   const formData = new FormData();
   const fileUrl = AjaxUrl+"data/fileUpload.svt";
   formData.append('files[]',option.file);
   
   reqwest({ /*官網(wǎng)解釋：It's AJAX
      All over again. Includes support
      for xmlHttpRequest, JSONP, CORS,
       and CommonJS Promises A.*/
   url: fileUrl,
   method: 'post',
   processData: false,
   data: formData,
   success: (res) => {
    //res為文件上傳成功之后返回的信息，res.responseText為接口返回的值
    let fileInfo = JSON.parse(res.responseText);
    if(res){
    this.setState({
     fileInfo:fileInfo,
     loading: false,
     uploading: false,
     defaultFile:false
    })
    }
    
   },
   error: () => {
    this.setState({
     loading: false,
     uploading: false
    })
    message.error("文件上傳失敗！");
   },
   });
  }

注意：reqwest其實(shí)就是ajax異步請(qǐng)求。更多了解參考： https://www.npmjs.com/package/reqwest

antd的upload組件上傳功能踩坑

在初次使用upload組件上傳文件時(shí)，出現(xiàn)了幾個(gè)風(fēng)格各異的bug，因此做一個(gè)記錄

錯(cuò)誤的起源

使用upload組件的自動(dòng)上傳方式，上傳到項(xiàng)目后臺(tái)fdfs接口，結(jié)果瀏覽器報(bào)錯(cuò)，報(bào)405錯(cuò)誤

使用form表單和input元素進(jìn)行原生JS提交

提交到相同接口，只是報(bào)跨域錯(cuò)誤，并沒(méi)有發(fā)生405錯(cuò)誤

更改接口接收文件

這時(shí)決定不使用fdfs接口接收文件，后臺(tái)同事重新提供一個(gè)后臺(tái)接口。但是出現(xiàn)了新的問(wèn)題。

新的問(wèn)題 后臺(tái)只接收單個(gè)文件 不接受數(shù)組形式的文件列表

這個(gè)應(yīng)該是后臺(tái)的原因，但是后臺(tái)沒(méi)有找到解決方法，于是從前端使用一個(gè)折衷辦法，獲取filelist后遍歷list，重復(fù)添加file字段到FormData對(duì)象

fileList.forEach((value,index)=>{
 formData.append("file",value)
})

說(shuō)明：上述內(nèi)容均是自己在開(kāi)發(fā)過(guò)程中總結(jié)出來(lái)，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論