taro react 文件上传

组件
import Taro, { Component } from '@tarojs/taro'
import { View } from '@tarojs/components'
import React, { PureComponent } from 'react'
import {  AtImagePicker, AtButton } from "taro-ui"

import docx from './docx.png'

class ChooseImage extends PureComponent {
  
  constructor(props) {
    super(props)
    this.state = ({
      files: [],
      showUploadBtn:false,
      upLoadImg:[]
    })
  }
  componentWillMount() {
    console.log(this.props.chooseImg)
    this.setState({
      files: this.props.chooseImg.files,
      showUploadBtn:this.props.chooseImgshowUploadBtn,
      upLoadImg:this.props.chooseImg.upLoadImg
    })
  }

  onChange (v,doType,index) {

    this.props.onFilesValue(v)

    console.log(2,v) // doType代表操作类型，移除图片和添加图片,index为移除图片时返回的图片下标
    if(doType==='remove'){
      this.setState((prevState)=>{
        let oldSendImg = prevState.upLoadImg
        oldSendImg.splice(oldSendImg[index],1) // 删除已上传的图片地址
        return ({
          files:v,
          upLoadImg:oldSendImg
        })
      },()=>{
        const {files} = this.state
        if(files.length===3){  // 最多三张图片 隐藏添加图片按钮
          this.setState({
            showUploadBtn:false
          })
        }else if(files.length===0){
          this.setState({
            upLoadImg:[]
          })
        }else{
          this.setState({
            showUploadBtn:true
          })
        }
      })
    }else{
      console.log(1,v)
      v.map((item, index)=>{
       
        if (item.url.indexOf(".docx") > -1 || item.url.indexOf(".DOCX") > -1) {
          v[index].url = docx
        }
      })
      this.setState(()=>{
        return ({
          files:v
        })
      },()=>{
        const {files} = this.state
        if(files.length===3){  // 最多三张图片 隐藏添加图片按钮
          this.setState({
            showUploadBtn:false
          })
        }else{
          this.setState({
            showUploadBtn:true
          })
        }
      })
    }
  }
  // 选择失败回调
  onFail (mes) {
    console.log(mes)
  }
  // 点击图片回调
  onImageClick (index, file) {
    let imgs = []
    this.state.files.map((item, index) => {
      imgs.push(item.file.path)
    })
    if (imgs[index].indexOf(".pdf") > -1 || imgs[index].indexOf(".PDF") > -1) {
      Taro.downloadFile({
        url: imgs[index],
        success: function (res) {
          let filePath = res.tempFilePath
          Taro.openDocument({
            filePath: filePath,
            success: function (res) {
              console.log('打开文档成功')
            }
          })
        }
      })
    }else{
      Taro.previewImage({
        //当前显示图片
        current: imgs[index],
        //所有图片
        urls: imgs
      })
    }
  }
  
  
  
  render() {
   
    return (
      <View>
        <AtImagePicker
          multiple={false}
          length={3}  //单行的图片数量
          files={this.state.files}
          onChange={this.onChange.bind(this)}
          onFail={this.onFail.bind(this)}
          onImageClick={this.onImageClick.bind(this)}
          showAddBtn={this.state.showUploadBtn} //是否显示添加图片按钮
        />
      </View>
    )
  }
}

export default ChooseImage

页面
import Taro from '@tarojs/taro'
import React, { PureComponent } from 'react'
// 界面组件
import { View, Text } from '@tarojs/components'
import { AtTextarea } from 'taro-ui'
import CTopbar from '../../../components/CTopBar/index'
import ChooseImage from '../../../components/CUpload/index'
import { GetStorageToken} from '@/server/utils'
import './index.scss'

/**
 * 企业专项服务界面
 */
class SpecialServices extends PureComponent<any> {
  constructor(props) {
    super(props)
    this.state = {
      value: '',
      chooseImg: {
        files: [],
        showUploadBtn:true,
        upLoadImg:[]
      },
      files:[],
      BASE_URL:'http://182.131.21.12:54001'
    }
  }
 // 拿到子组件上传图片的路径数组
 getOnFilesValue = (value) => {
  console.log(3,value);
  this.setState({
    files: value
  },() => {
    console.log(this.state.files)
  })

}
  
  handleChange(value) {
    this.setState({
      value,
    })
  }

  // 上传组件
  
  uploadLoader = (data)=>{
   console.log(GetStorageToken())
    let that = this
    let i = data.i ? data.i : 0 // 当前所上传的图片位置
    let success=data.success?data.success:0//上传成功的个数
    let fail=data.fail?data.fail:0;//上传失败的个数
    Taro.showLoading({
      title: `正在上传第${i+1}张`
    })
    // 发起上传
    Taro.uploadFile({
      url:this.state.BASE_URL+'/api/applets/file/uploadFile',
      header:{
        'content-type': 'multipart/form-data',
        'Authorization':GetStorageToken().authorization // 上传需要单独处理cookie
      },
      name:'file',
      filePath:data[i].file.path,
      success: (resp) => {
        console.log(resp)
         //图片上传成功，图片上传成功的变量+1
         
          if(resp.statusCode == 200){
            success++;
           
          }else{
            fail++;
          }
      },
      fail: () => {
          fail++;//图片上传失败，图片上传失败的变量+1
      },
      complete: () => {
          Taro.hideLoading()
          i++;//这个图片执行完上传后，开始上传下一张
          if(i==data.length){   //当图片传完时，停止调用
            Taro.showToast({
              title: '上传成功',
              icon: 'success',
              duration: 2000
            })
          }else{//若图片还没有传完，则继续调用函数
              data.i=i;
              data.success=success;
              data.fail=fail;
              that.uploadLoader(data);
          }
      }
    })
  }
 
  render() {
    return (
      <View>
        <CTopbar title='需求填写' showBack='true'></CTopbar>
        <View className='content'>
          <View className='wrapper'>
            <View>给律师留言:</View>
            <View>
              <AtTextarea value={this.state.value} onChange={this.handleChange.bind(this)} maxLength={500} placeholder='' />
            </View>
          </View>
          <View className='wrapper'>
            <View>上传文件</View>
            <View className='up'>
              {/* <Text className='upfiles' onClick={this.uploadFile.bind(this)}>
                上传
              </Text> */}
             
            </View>
            <ChooseImage chooseImg={this.state.chooseImg} onFilesValue={this.getOnFilesValue.bind(this)} />
           
          </View>

          <View className='footer'>
            <View className='at-row at-row__justify--between'>
              <View className='at-col at-col-10 '>
                <Text className='tit_2'></Text>订单价格<Text className='price'>199.00</Text>
              </View>
              <View className='at-col at-col-10 btn' onClick={this.uploadLoader.bind(this,this.state.files)}>立即购买</View>
            </View>
          </View>
        </View>
      </View>
    )
  }
}

export default SpecialServices