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

Posted 2020-10-14 lee_xiumei

一、主要任务：悉尼小程序管理后台，添加景点页面的开发

二、所遇问题及解决

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