1.antd官網(wǎng)Upload組件：
https://ant.design/components/upload-cn/
2.下圖是最近開發(fā)的上傳文檔的效果：
3.文件上傳的實現(xiàn)：
（1）方法一：antd默認上傳。
a：渲染文件上傳組件。getPDFURL（）方法為實現(xiàn)文件的上傳。showUploadList為是否展示 uploadList, true顯示，false不顯示，其可設為一個對象，用于單獨設定 showPreviewIcon 和 showRemoveIcon。type為上傳按鈕的圖標。如下圖所示。
{/* 渲染文件上傳組件 */} <Upload {...this.getPdfURL()} showUploadList={false}> <Button> <Icon type="upload" /> 上傳文件 </Button> </Upload>b：getPDFURL（）方法為實現(xiàn)文件的上傳。name是發(fā)到后臺的文件參數(shù)名。action為上傳文件的地址。accept是接受上傳的文件類型。headers是設置上傳的請求頭部，IE10 以上有效。onChange是上傳文件改變時的狀態(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) {//上傳文件改變時的狀態(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可以用于設置接口不同類型的文件類型
（2）方法二：使用customRequest通過覆蓋默認的上傳行為，自定義自己的上傳實現(xiàn)。
a：渲染文件上傳組件。accept是接受上傳的文件類型。customRequest通過覆蓋默認的上傳行為，customRequest（）方法是自定義自己的上傳實現(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（）方法是自定義自己的上傳實現(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其實就是ajax異步請求。更多了解參考： https://www.npmjs.com/package/reqwest
antd的upload組件上傳功能踩坑
在初次使用upload組件上傳文件時，出現(xiàn)了幾個風格各異的bug，因此做一個記錄
錯誤的起源
使用upload組件的自動上傳方式，上傳到項目后臺fdfs接口，結(jié)果瀏覽器報錯，報405錯誤
使用form表單和input元素進行原生JS提交
提交到相同接口，只是報跨域錯誤，并沒有發(fā)生405錯誤
更改接口接收文件
這時決定不使用fdfs接口接收文件，后臺同事重新提供一個后臺接口。但是出現(xiàn)了新的問題。
新的問題 后臺只接收單個文件 不接受數(shù)組形式的文件列表
這個應該是后臺的原因，但是后臺沒有找到解決方法，于是從前端使用一個折衷辦法，獲取filelist后遍歷list，重復添加file字段到FormData對象
fileList.forEach((value,index)=>{ formData.append("file",value)})說明：上述內(nèi)容均是自己在開發(fā)過程中總結(jié)出來，希望對大家的學習有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點
疑難解答
