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

Posted lee_xiumei

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了2017.11.7 ant design - upload 组件的使用, react 条件渲染以及 axios.all() 的使用相关的知识,希望对你有一定的参考价值。

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

二、所遇问题及解决

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

 

以上是关于2017.11.7 ant design - upload 组件的使用, react 条件渲染以及 axios.all() 的使用的主要内容,如果未能解决你的问题,请参考以下文章

ant Design(pc端的使用),并实现ant design的按需加载

@ant-design/charts 的 Next.js 问题,错误

Table - Ant Design - 在 Virtual table ant design 中实现过滤器

初识Ant-Design

如何自定义 Ant.design 样式

ant-design-pro 之 Login 组件