AtImagePicker Taro.uploadFile 上传问题



  • import Taro, { Component } from '@tarojs/taro'
    import { View, Text, } from '@tarojs/components'
    import { bindActionCreators } from 'redux'
    import { connect } from '@tarojs/redux'
    import Layout from 'layout'
    import { } from './redux'

    import 'assets/style/customer-ui.scss'
    import style from './index.module.scss'
    import { AtRate, AtImagePicker } from 'taro-ui'
    import Evaluation from 'components/Evaluation'
    import Toast from 'utils/toast'
    import LINK from 'utils/link'
    import api from 'config/api'
    import rental from 'services/rental'

    class ShortRentEvaluation extends Layout {

    config = {
    navigationBarTitleText: '订单评价'
    }

    state = {
    starCfg: [
    { label: '手续办理', fieds: 'procedures_level', value: 0 },
    { label: '服务态度', fieds: 'service_quality_level', value: 0 },
    { label: '车辆整洁', fieds: 'clean_level', value: 0 },
    { label: '车辆状态', fieds: 'vehicle_condition_level', value: 0 },
    ],
    files: []
    }

    sameDidMount() { }

    async sameDidShow() {
    if (!this.$router.params.id) { // url 中订单id检测
    await Toast({
    title: '参数错误',
    icon: 'error',
    duration: 1300,
    })
    Taro.redirectTo({ url: LINK.INDEX })
    }
    }

    /**

    • 点击星星
      */
      starChange(fields, value) {
      let starCfg = [...this.state.starCfg]
      starCfg.forEach(item => {
      if (item.label === fields) {
      item.value = value
      }
      })
      this.setState({ starCfg })
      }

    onChange(files) {
    console.log(files);
    console.log(files[0].url);

    Taro.uploadFile({
      url: api.uploadCommentsImages, //仅为示例,非真实的接口地址
      filePath: files[0].url,
      name: 'file',
      formData: {
        'user': 'test'
      },
      success (res){
        const data = res.data
        //do something
      }
    })
    this.setState({
      files
    })
    

    }
    onFail(mes) {
    console.log(mes)
    }
    onImageClick(index, file) {
    console.log(index, file)

    }

    /**

    • 提交
      */
      confirm = async res => {
      let data = {
      description: res.msg,
      }
      this.state.starCfg.forEach(item => {
      data[item.fieds] = item.value
      })
    await rental.comments(this.$router.params.id, data)
    await Toast({
      title: '感谢评价!',
      duration: 1300
    })
    Taro.navigateTo({
      url: LINK.HOME,
    })
    

    }

    render() {

    const { starCfg } = this.state
    
    return <View className={`page-wrap`}>
      <View className={style.tit}><Text>请对本次服务进行评价</Text></View>
      {/* 星级 */}
      <View className={style.stars}>
        {
          starCfg.map(item =>
            <View className={style.starRow}>
              <Text>{item.label}</Text><AtRate onChange={e => this.starChange(item.label, e)} value={item.value} margin={20} />
            </View>
          )
        }
      </View>
    
      {/* 输入框和选择标签 */}
      <Evaluation
        tags={['车内整洁', '取还车便捷', '驾驶体验不错', '车内有异味', '服务体验不好',]}
        onConfirm={this.confirm}
      />
    
      <View className={style.AtImagePicker}> 
        <AtImagePicker
          multiple
          count={5}
          files={this.state.files}
          onChange={this.onChange.bind(this)}
          onFail={this.onFail.bind(this)}
          onImageClick={this.onImageClick.bind(this)}
        />
      </View>    
    </View>
    

    }
    }

    export default connect(
    state => {
    return {
    // TODO...
    }
    },
    dispatch => bindActionCreators(
    {
    // TODO...
    },
    dispatch,
    ),
    )(ShortRentEvaluation)

    //问题描述
    我上传图片的时候想要下面的1da279b1-75f6-4efa-8e35-1cbe29120637-image.png

    但是现在我上传图片确实这样的,导致后台接收有问题

    b829bced-6cbf-41b0-901b-4ed77dae75dd-image.png


登录后回复