react中使用antd-mobile的ImagePicker组件在安卓机型上不显示

Question

问题描述

  在用react做移动端web混合开发时，使用antd-mobile中的imagePicker组件做选取手机内图片上传的功能，但是问题在于苹果手机上功能是正常的，但是在安卓手机上选取图片后，图片没有正常显示在页面，是antd-mobile和安卓系统的兼容问题吗

相关代码

结构

import React,{Component} from 'react'
import {connect} from 'dva'
import "./index.less"

import http from "../../utils/axios"
const query = require("../../utils/query")
import {NavBar, Icon,ImagePicker,DatePicker,Button,Toast } from 'antd-mobile'
const format = require("../../utils/date")

class UploadInterpretation extends Component{

constructor(props){
    super(props)
    query.bind(this)
    let {userInfomation}=props
    this.state = {
        date:new Date(),
        dateStr:format.d( Date.now()/1000 ),
        names:"yyyyyyyyyyyyyyyyy",
        files:[],
        multiple:true,
        projectcode:userInfomation.projectcode
    }
}
componentDidMount(){
    if( !this.state.projectcode )query.go("/education")
}
shouldComponentUpdate(){
    return true
}
back=()=>query.back()
inputChange = type=>{
    if(type==="date"){
        
    }
}
inputEnd = ()=>{

}

selectDate =e=>this.setState({date:e,dateStr:format.d(e) })
// imageChange = files => this.setState({files})
imageChange = (files, type, index) => {
    console.log(files, type, index);
    this.setState({
            files,
            multiple: this.state.multiple,
    });
    console.log(this.state.files);
};
submit = ()=>{
    if( !this.state.projectcode )query.go("/education")
    let {projectcode,dateStr,files,names} = this.state
    let formData = new FormData()
    files.forEach(item=>{
        formData.append('blFile',item.file)
    })
    formData.append('name',names)
    formData.append('projectCode',projectcode)
    formData.append('createdAt',dateStr)
    if(!files.length)return
    http({
        url:"/api/edu/edu-technical-disclosure/savePhone",
        method:"upload",
        param:formData
    }).then(data=>{
        if(data=="SUCCESS"){
            this.setState({
                files:[]
            })
            Toast.success("上传成功", 2)
        }
        
    })
}
render(){
    let {date,names,dateStr,files} = this.state
    return(
        <div className="upload_interpretation">
            <NavBar className="page_header_color" icon={<Icon type="left" />} leftContent="返回" onLeftClick={this.back}>安全技术交底</NavBar>

            <div className="form">
                {/* <div className="form_item">
                    <span className="label">名称：</span>
                    <input type="text" value={names} onChange={e=>this.setState({names:e.target.value})} placeholder="输入本次技术交底名称" />
                </div> */}
            
                <DatePicker mode="date" title="时间选择" maxDate={new Date()} value={date} onOk={this.selectDate}>
                <div className="form_item">
                    <span className="label">时间：</span>
                    <input type="button" style={{textAlign:"left"}} value={dateStr} />
                </div>
                </DatePicker>

                <p style={{margin:"10px"}}>上传图片资料</p>
                <div >
                <ImagePicker
                    files={this.state.files}
                    onChange={this.imageChange}
                    onImageClick={(index, fs) => console.log(index, fs)}
                    selectable={files.length <4}
                    length={4}
                    multiple={this.state.multiple}
                    />
                </div>

                <div style={{textAlign:"center",marginTop:"50px"}}>
                    <Button type="primary" onClick={this.submit} inline size="small" style={{ marginRight: '4px' }}>提交</Button>
                </div>
            
            
            </div>


        </div>
    )
}

}

function mapStateToProps(state) {

return {...state.userInfoModel};

}

export default connect(mapStateToProps)(UploadInterpretation)

Answer 1

请问你解决了吗这个问题？我也遇到了同样的问题