使用antd的Upload組件和axios上傳文件

一、產品需求

   用戶可以自由選擇（選擇后可以刪除、重新選）一個文件，文件選擇好后點擊上傳按鈕進行上傳。

 

二、代碼實現

1.state定義

 this.state = {
        showModal: false,
        fileList: [],          //文件列表，用於控制upload組件
        uploading: false  //上傳按鈕loading顯示控制
 }

　　

2.Upload組件的文件選擇變化處理，上傳按鈕動作處理（使用axios上傳文件）

handleFileChange = ({file, fileList}) => { //處理文件change，保證用戶選擇的文件只有一個
    this.setState({
        'fileList': fileList.length? [fileList[fileList.length - 1]] : []
    })
}

handleUpload = () => {
    if(!this.state.fileList.length) {
        message.warning("請選擇要上傳的文件")
    }

    const formData = new FormData()
    formData.append('file', this.state.fileList[0].originFileObj)

    this.setState({
        uploading: true
    })

    Axios.defaults.baseURL='https://jsonplaceholder.typicode.com/'
    Axios({
        method: 'post',
        url: 'posts',
        data: formData,
        headers: { "Content-Type": "multipart/form-data"}
    }).then(({data}) => {
        message.success("上傳成功")
        console.log(data)
    }).catch((err) =>{
        console.log(err)
    }).finally(() =>{
        this.setState({
            uploading: false
        })
    })
}

　　

3.Upload組件使用

<Upload fileList={this.state.fileList} beforeUpload={(f, fList) => false} onChange={this.handleFileChange} >
    <Button>
        <CloudUploadOutlined /> 選擇文件
    </Button>
</Upload>

　

4.效果

 

三、注意事項

1.antd的Upload組件，在用戶選擇文件后會馬上進行上傳，可以自定義beforeUpload方法進行控制，若直接返回false就不上傳“beforeUpload={(f, fList) => false}”。

2.要想post上傳文件，發送的數據需要為FormData而不是json之類的，所以代碼會先new一個FormData，然后把用戶選擇的文件添加到FormData里面去。（直接console.log打印FormData永遠都是空，所以不要嘗試直接打印FormData判斷文件是否添加成功）

3.antd選擇后的文件file是經過包裝的數據，添加到formData時需要取file.originFileObj。官方案例沒這么寫，但用axios上傳時如果直接使用file，后台會出現死活找不到數據的情況（坑了我好幾個小時才找到原因）。

4.axios的請求參數中需要加入“headers: { "Content-Type": "multipart/form-data"}”，來申明傳的是表單數據。