提交 4da6c493 authored 作者: 钟是志's avatar 钟是志

34049 [离校]学生登录-学生处分中上次图片后不能正常提交【522622200506284524 123456】

上级 7e192255
import React, { Component } from 'react';
import React, {Component} from 'react';
import PropTypes from 'prop-types';
import { ImagePicker, Toast } from 'antd-mobile';
import {ImagePicker, Toast} from 'antd-mobile';
import config from '@/config/config';
import { getToken } from '@/H5Public/utils/authority';
import {getToken} from '@/H5Public/utils/authority';
/**
......@@ -17,6 +17,7 @@ import { getToken } from '@/H5Public/utils/authority';
// 全局loadinng
let loadingCount = 0;
class Upload extends Component {
constructor(props) {
super(props)
......@@ -25,15 +26,16 @@ class Upload extends Component {
urlList: [] // 后端返回图片地址
}
}
componentDidMount(){
componentDidMount() {
// 回显
const ImageArr=[];
this.props.defaultFiles.map(item=>{
const ImageArr = [];
this.props.defaultFiles.map(item => {
ImageArr.push({
url:item
url: item
})
})
this.setState({files:ImageArr})
this.setState({files: ImageArr})
}
// 图片压缩函数
......@@ -77,22 +79,27 @@ class Upload extends Component {
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], filename, { type: mime });
return new File([u8arr], filename, {type: mime});
};
// 上传本地
onChange = (files) => {
this.setState({ files });
this.setState({files});
}
// 上传图片--方法
uploadImg = (file, callback) => {
const xhr = new XMLHttpRequest();
const formData = new FormData();
formData.append('file', file);
if(config.version === 'bdk'){
xhr.open('post', config.uploadUrl, true);
}else{
xhr.open('post', config.uploadUrl + "?token=" + getToken(), true);
}
xhr.setRequestHeader("Accept", "application/json;charset=UTF-8");
xhr.setRequestHeader("Authorization", `bearer ${getToken()}`);
xhr.send(formData);
xhr.onreadystatechange = () => {
if (xhr.readyState == 4 && xhr.status == 200) {
if (xhr.readyState == 4 && xhr.status === 200) {
const json = JSON.parse(xhr.responseText);
callback(json.url)
}
......@@ -101,31 +108,31 @@ class Upload extends Component {
// 上传后获取后端返回图片地址
uploadCall = (item) => (
this.uploadImg(item, (res) => {
this.setState({ urlList: [...this.state.urlList, res] }, () => {
this.setState({urlList: [...this.state.urlList, res]}, () => {
if (this.state.files.length === this.state.urlList.length) {
Toast.hide()
loadingCount = 0;
const {handleSubmit,labelId=''}=this.props;
handleSubmit(this.state.urlList,labelId) // 把后端返回url传给父组件
const {handleSubmit, labelId = ''} = this.props;
handleSubmit(this.state.urlList, labelId) // 把后端返回url传给父组件
}
})
})
)
// 提交
handleSubmit = () => {
const { files } = this.state;
const {files} = this.state;
Toast.loading('Loading...', 0);
// 判断是否是回显的图片--不是则进行压缩
const httpFiles=files.filter(item=>item.url.startsWith('http')) // 回显图片
const oldUrlArr=[];
httpFiles.map(item=>oldUrlArr.push(item.url))
const Files=files.filter(item => !item.url.startsWith('http')) // 本地图片
this.setState({urlList:oldUrlArr},()=>{
if(Files.length==0){
const httpFiles = files.filter(item => item.url.startsWith('http')) // 回显图片
const oldUrlArr = [];
httpFiles.map(item => oldUrlArr.push(item.url))
const Files = files.filter(item => !item.url.startsWith('http')) // 本地图片
this.setState({urlList: oldUrlArr}, () => {
if (Files.length == 0) {
Toast.hide()
loadingCount = 0;
const {handleSubmit,labelId=''}=this.props;
handleSubmit(this.state.urlList,labelId) // 把后端返回url传给父组件
const {handleSubmit, labelId = ''} = this.props;
handleSubmit(this.state.urlList, labelId) // 把后端返回url传给父组件
}
Files.map(item => {
loadingCount++
......@@ -133,18 +140,19 @@ class Upload extends Component {
})
})
}
render() {
const { files } = this.state;
const {multiple,accept,length,readOnly,rest}=this.props;
const {files} = this.state;
const {multiple, accept, length, readOnly, rest} = this.props;
return (
<div>
<ImagePicker
files={files}
accept={accept}
onChange={this.onChange}
selectable={readOnly?false:(files.length < length)}
selectable={readOnly ? false : (files.length < length)}
multiple={multiple}
disableDelete={readOnly?true:false}
disableDelete={!!readOnly}
{...rest}
/>
</div>
......@@ -156,20 +164,20 @@ Upload.propTypes = {
multiple: PropTypes.bool, // 是否支持多选
accept: PropTypes.string, // 上传格式限制
length: PropTypes.number, // 最大支持上传张数
handleSubmit:PropTypes.func.isRequired, // 上传函数
rest:PropTypes.object,
defaultFiles:PropTypes.array, // 初始值
readOnly:PropTypes.bool,
labelId:PropTypes.any // 组件id 标识
handleSubmit: PropTypes.func.isRequired, // 上传函数
rest: PropTypes.object,
defaultFiles: PropTypes.array, // 初始值
readOnly: PropTypes.bool,
labelId: PropTypes.any // 组件id 标识
}
Upload.defaultProps = {
multiple: true, // 是否支持多选
accept: 'image/*', // 上传格式限制
length: 10, // 最大支持上传张数
defaultFiles:[],
readOnly:false,
labelId:''
defaultFiles: [],
readOnly: false,
labelId: ''
}
export default Upload;
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论