Taro -- 上傳圖片公用組件

Taro上傳圖片公用組件

子組件chooseImage

//component/chooseImage/index.js
import Taro, { Component } from '@tarojs/taro'
import { View } from '@tarojs/components'
import {  AtImagePicker, AtButton } from "taro-ui"

class ChooseImage extends Component {
  
  constructor() {
    super(...arguments);
    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
    })
  }

  componentDidShow() { }

  componentDidHide() { }

  onChange (v,doType,index) { // 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
        //this.setFatherUploadSrc()// 設置刪除數據圖片地址
        if(files.length===3){  // 最多三張圖片 隱藏添加圖片按鈕
          this.setState({
            showUploadBtn:false
          })
        }else if(files.length===0){
          this.setState({
            upLoadImg:[]
          })
        }else{
          this.setState({
            showUploadBtn:true
          })
        }
      })
    }else{
      v.map((item, index)=>{
        if (item.url.indexOf(".pdf") > -1 || item.url.indexOf(".PDF") > -1) {
          v[index].url = require("../../assets/images/PDF.png")
        }
      })
      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
      })
    }
  }
  toUpload = () => {
    const { files } = this.state
    if(files.length>0){
      this.props.onFilesValue(files)
      const rootUrl = get('rootUrl') // 服務器地址
      const cookieData = Taro.getStorageSync('token')  // 圖片上傳需要單獨寫入token
      this.uploadLoader({rootUrl,cookieData,path:files})
    }else{
      Taro.showToast({
        title: '請先點擊+號選擇圖片',
        icon: 'none',
        duration: 2000
      })
    }
  }
  // 上傳組件
  uploadLoader = (data)=>{
    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:data.rootUrl+'/app/index/uploadFile',
      header:{
        'content-type': 'multipart/form-data',
        'cookie':'token='+data.cookieData // 上傳需要單獨處理cookie
      },
      name:'file',
      filePath:data.path[i].url,
      success: (resp) => {
         //圖片上傳成功，圖片上傳成功的變量+1
          let resultData= JSON.parse(resp.data)
          if(resultData.code === "0"){
            success++;
            this.setState((prevState)=>{
              let oldUpload = prevState.upLoadImg
              oldUpload.push(resultData.data)
              return({
                upLoadImg:oldUpload
              })
            },()=>{
              // setSate會合並所有的setState操作，所以在這里等待圖片傳完之后再調用設置url方法
              /*
              * 該處十分重要
              **/
              //this.setFatherUploadSrc()// 設置數據圖片地址字段
            })
          }else{
            fail++;
          }
      },
      fail: () => {
          fail++;//圖片上傳失敗，圖片上傳失敗的變量+1
      },
      complete: () => {
          Taro.hideLoading()
          i++;//這個圖片執行完上傳后，開始上傳下一張
          if(i==data.path.length){   //當圖片傳完時，停止調用
            Taro.showToast({
              title: '上傳成功',
              icon: 'success',
              duration: 2000
            })
            console.log('成功：'+success+" 失敗："+fail);
          }else{//若圖片還沒有傳完，則繼續調用函數
              data.i=i;
              data.success=success;
              data.fail=fail;
              that.uploadLoader(data);
          }
      }
    })
  }

  render() {
    const { showUploadBtn } =this.state
    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={showUploadBtn} //是否顯示添加圖片按鈕
        />
        <AtButton type='primary' className='poof_submit_btn' onClick={this.toUpload}>上傳圖片</AtButton>
      </View>
    )
  }
}

export default ChooseImage

父組件home

//pages/home/index.js

import ChooseImage from '../../component/chooseImage'

class Home extends Component {
  
  constructor() {
    super(...arguments);
    this.state = ({
      chooseImg: {
        files: [],
        showUploadBtn:true,
        upLoadImg:[]
      },
      files:[],
    })
  }

  config = {
    navigationBarTitleText: '首頁'
  }

  componentWillMount() {
  }
  
  // 拿到子組件上傳圖片的路徑數組
  getOnFilesValue = (value) => {
    console.log(value);
    this.setState({
      files: value
    },() => {
      console.log(this.state.files)
    })

  }
  render() {
    return (
      <View className="home">
        <ChooseImage chooseImg = {this.state.chooseImg} onFilesValue={this.getOnFilesValue.bind(this)}/>
      </View>

    )
  }
}

export default Home

如圖：