Skip to content

H
H5Public
提交 4da6c493 authored 作者: 钟是志's avatar 钟是志
浏览文件
操作

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

上级 7e192255
隐藏空白字符变更
内嵌 并排
正在显示 包含 153 行增加 和 145 行删除
HighStateComponent/UploadImage/index.js
浏览文件 @ 4da6c493
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';
/**
* 组件使用方法
*
* <Upload
ref='upload' this.refs.upload.handleSubmit() 调用子组件提交方法
handleSubmit={this.submit1} 子组件提交后返回后端数据回调函数
// rest={{disableDelete:true}} 基于antd-mobile，可使用antd自身属性---不是必填项
/>
ref='upload' this.refs.upload.handleSubmit() 调用子组件提交方法
handleSubmit={this.submit1} 子组件提交后返回后端数据回调函数
// rest={{disableDelete:true}} 基于antd-mobile，可使用antd自身属性---不是必填项
/>
*/
// 全局loadinng
let loadingCount = 0;
class Upload extends Component {
constructor(props) {
super(props)
this.state = {
files: [], // 图片文件
urlList: [] // 后端返回图片地址
}
}
componentDidMount(){
// 回显
const ImageArr=[];
this.props.defaultFiles.map(item=>{
ImageArr.push({
url:item
})
})
this.setState({files:ImageArr})
constructor(props) {
super(props)
this.state = {
files: [], // 图片文件
urlList: [] // 后端返回图片地址
}
}
// 图片压缩函数
zipImage = (file) => {
let fileSizeMb = file.size / 1024 / 1024;
let fileName = file.name;
if (fileSizeMb < this.props.fileSizeMb) { // 1MB 以下的图片不需要压缩。
this.uploadCall(file)
return false;
}
let reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = (e) => {
//这里的e.target.result就是转换后base64格式的图片文件
let image = new Image(); //新建一个img标签（还没嵌入DOM节点)
image.src = e.target.result;
return image.onload = () => {
let canvas = document.createElement('canvas');
let context = canvas.getContext('2d');
let imageWidth = image.width * 0.3; //压缩后图片的大小
let imageHeight = image.height * 0.3;
let data = '';
canvas.width = imageWidth;
canvas.height = imageHeight;
componentDidMount() {
// 回显
const ImageArr = [];
this.props.defaultFiles.map(item => {
ImageArr.push({
url: item
})
})
this.setState({files: ImageArr})
}
context.drawImage(image, 0, 0, imageWidth, imageHeight);
data = canvas.toDataURL('image/jpeg');
let zipFile = this.dataURLtoFile(data, fileName);
this.uploadCall(zipFile)
};
};
};
//将base64转换为文件
dataURLtoFile = (dataurl, filename) => {
let arr = dataurl.split(',');
let mime = arr[0].match(/:(.*?);/)[1];
// 图片压缩函数
zipImage = (file) => {
let fileSizeMb = file.size / 1024 / 1024;
let fileName = file.name;
if (fileSizeMb < this.props.fileSizeMb) { // 1MB 以下的图片不需要压缩。
this.uploadCall(file)
return false;
}
let reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = (e) => {
//这里的e.target.result就是转换后base64格式的图片文件
let image = new Image(); //新建一个img标签（还没嵌入DOM节点)
image.src = e.target.result;
return image.onload = () => {
let canvas = document.createElement('canvas');
let context = canvas.getContext('2d');
let imageWidth = image.width * 0.3; //压缩后图片的大小
let imageHeight = image.height * 0.3;
let data = '';
canvas.width = imageWidth;
canvas.height = imageHeight;
let bstr = atob(arr[1]);
let n = bstr.length;
let u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], filename, { type: mime });
context.drawImage(image, 0, 0, imageWidth, imageHeight);
data = canvas.toDataURL('image/jpeg');
let zipFile = this.dataURLtoFile(data, fileName);
this.uploadCall(zipFile)
};
};
// 上传本地
onChange = (files) => {
this.setState({ files });
}
// 上传图片--方法
uploadImg = (file, callback) => {
const xhr = new XMLHttpRequest();
const formData = new FormData();
formData.append('file', file);
xhr.open('post', config.uploadUrl + "?token=" + getToken(), true);
xhr.setRequestHeader("Accept", "application/json;charset=UTF-8");
xhr.send(formData);
xhr.onreadystatechange = () => {
if (xhr.readyState == 4 && xhr.status == 200) {
const json = JSON.parse(xhr.responseText);
callback(json.url)
}
}
};
//将base64转换为文件
dataURLtoFile = (dataurl, filename) => {
let arr = dataurl.split(',');
let mime = arr[0].match(/:(.*?);/)[1];
let bstr = atob(arr[1]);
let n = bstr.length;
let u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
// 上传后获取后端返回图片地址
uploadCall = (item) => (
this.uploadImg(item, (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传给父组件
}
})
})
)
// 提交
handleSubmit = () => {
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){
Toast.hide()
loadingCount = 0;
const {handleSubmit,labelId=''}=this.props;
handleSubmit(this.state.urlList,labelId) // 把后端返回url传给父组件
}
Files.map(item => {
loadingCount++
this.zipImage(item.file)
})
})
return new File([u8arr], filename, {type: mime});
};
// 上传本地
onChange = (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);
}
render() {
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)}
multiple={multiple}
disableDelete={readOnly?true:false}
{...rest}
/>
</div>
);
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) {
const json = JSON.parse(xhr.responseText);
callback(json.url)
}
}
}
// 上传后获取后端返回图片地址
uploadCall = (item) => (
this.uploadImg(item, (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传给父组件
}
})
})
)
// 提交
handleSubmit = () => {
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) {
Toast.hide()
loadingCount = 0;
const {handleSubmit, labelId = ''} = this.props;
handleSubmit(this.state.urlList, labelId) // 把后端返回url传给父组件
}
Files.map(item => {
loadingCount++
this.zipImage(item.file)
})
})
}
render() {
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)}
multiple={multiple}
disableDelete={!!readOnly}
{...rest}
/>
</div>
);
}
}
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 标识
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 标识
}
Upload.defaultProps = {
multiple: true, // 是否支持多选
accept: 'image/*', // 上传格式限制
length: 10, // 最大支持上传张数
defaultFiles:[],
readOnly:false,
labelId:''
multiple: true, // 是否支持多选
accept: 'image/*', // 上传格式限制
length: 10, // 最大支持上传张数
defaultFiles: [],
readOnly: false,
labelId: ''
}
export default Upload;
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论