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

標籤：需要   寫法   ams   false   pread   1.7   地址   return   []   

一、主要任務：雪梨小程式管理後台，添加景點頁面的開發

二、所遇問題及解決

1. 上傳多個不同分類音頻資訊時，如中文音頻和英文音頻，要求音頻不是放在一個數組中的，每個音頻是一個獨立的欄位，此時：

<Uploadaction="/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) => {}))     

 

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