2017.11.7 ant design - upload 組件的使用， react 條件渲染以及 axios.all() 的使用

1、主要任務：悉尼小程序管理後臺，添加景點頁面的開發

2、所遇問題及解決

1. 上傳多個不一樣分類音頻信息時，如中文音頻和英文音頻，要求音頻不是放在一個數組中的，每一個音頻是一個獨立的字段，此時：

<Upload

action="/hserve/v2/file/upload/" // 必選參數，上傳的地址；

listType="picture" // 上傳列表的內建樣式，這個不是很明白 text、picture、picture-card 之間的區別，默認值爲 text；

showUploadList={false} // 是否展現 updateList，默認值爲 true；

accept="audio/*" // 接受上傳的文件類型，audio／*、video／*、image／*

fileList={cnAudioFileList} // 已經上傳的文件列表，這裏的 cnAudioFileList 初始值是爲空的，上傳後經過 handleAudioChange 來設置 cnAudioFileList 的值；

onChange={this.handleAudioChange.bind(this, 'cn')} // 這裏由於要分別上傳中英文的音頻，因此額外傳了一個用以區分的參數；

>

 

handleAudioChange = (type, { file, fileList }) => { // file：當前操做的文件對象， fileList：當前的文件列表；（自定義傳的參數須要放在默認參數的前面）

　　if (file.status === 'done') {

　　　　fileList[fileList.length - 1].url = file.response.path

　　　　let lastFile = fileList[fileList.length - 1]

　　　　if (type === 'cn') {

　　　　　　this.setState({

　　　　　　　　cnAudioFileList: fileList,

　　　　　　　　site: { ...this.state.site, cnAudio: lastFile.url }

　　　　　　})

　　　　} else {

　　　　　　this.setState({

　　　　　　　　enAudioFileList: fileList,

　　　　　　　　site: { ...this.state.site, enAudio: lastFile.url }

　　　　　　})

　　　　}

　　　　return

　　}

　　if (type === 'cn') {

　　　　this.setState({ cnAudioFileList: fileList })

　　} else {

　　　　this.setState({ enAudioFileList: fileList })

　　}

}

 

2. react 條件渲染，兩種寫法：

　　（1）let example = <Example {...props} />，再在 render 中引用 { example };

　　（2）直接在 render 中： { condition === value ? (<div>1</div>) : (<div>2</div>)  };

 

3. 對於多個接口相同，參數不一樣的請求，使用 axios.all()，具體用法：

　　

　　import axios from 'axios'

 

　　let promises = [];

 

　　promises.push(request1[params])

　　promises.push(request2[params])

　　axios.all(promises).then(res => {

　　　　console.log(res) // res 做爲一個數組，每項對應每一個請求　　

　　}).catch(() => { message.error('請求失敗') })

 

　　若是肯定有幾個請求的話，能夠分開返回參數，即 axios.all(promises).then(axios.spread(function(a, b) => {}))