123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147 |
- import React,{Component} from "react";
- import Taro from '@tarojs/taro';
- import {Text, View} from "@tarojs/components";
- import {AtImagePicker,AtToast } from "taro-ui";
- import './index.less';
- import 'taro-ui/dist/style/components/image-picker.scss';
- import 'taro-ui/dist/style/components/icon.scss';
- import 'taro-ui/dist/style/components/toast.scss';
- import 'taro-ui/dist/style/components/icon.scss';
- import getBaseUrl from "../../../utils/servers/baseUrl";
- class ImagePicker extends Component{
- constructor(props) {
- super(props);
- this.state={
- files: props.files || [],
- speedProgress:0,
- loading:false
- }
- this.onImgChange = this.onImgChange.bind(this);
- this.onFail = this.onFail.bind(this);
- this.onImageClick = this.onImageClick.bind(this);
- }
- onImgChange(files, operationType, index, type){
- const BASE_URL = getBaseUrl(this.props.url);
- let token = Taro.getStorageSync('token');
- let _this = this;
- if(operationType === 'remove'){
- let filesArr = files.concat([]);
- this.props.onChange(index,'remove');
- this.setState({
- files:filesArr
- })
- }else{
- let fileArr = this.state.files.concat([]);
- console.log(fileArr.length,files.length - fileArr.length)
- let arr = type === 'camera' ? files : files.splice(fileArr.length,files.length - fileArr.length)
- this.setState({
- loading:true
- })
- for(let i = 0;i<arr.length;i++){
- const uploadTask = Taro.uploadFile({
- url: BASE_URL + this.props.url, //仅为示例,非真实的接口地址
- filePath: arr[i].url,
- name: 'file',
- header: {
- 'Accept':'application/json, text/javascript,',
- 'content-type': 'application/x-www-form-urlencoded; charset=UTF-8',
- 'token': token
- },
- success: function (res){
- let dataJson = JSON.parse(res.data)
- if(dataJson.error.length === 0){
- _this.props.onChange(dataJson.data,'add');
- _this.state.files.push(arr[i]);
- _this.setState({
- files:_this.state.files
- })
- }else{
- Taro.showToast({title:dataJson.error[0].message,icon:'none'})
- if(dataJson.error[0].field === '403'){
- _this.setState({
- loading:false
- })
- Taro.reLaunch({
- url: '/pages/login/index'
- })
- }
- }
- },
- fail: function (err){
- console.log(err);
- Taro.showToast({title:'系统错误,请稍后重试',icon:'none'});
- },
- complete: function(v){
- console.log(v)
- }
- })
- uploadTask.progress((res) => {
- if(res.progress === 100){
- let num = this.state.speedProgress+1;
- let speed = num/arr.length*100;
- console.log(num,arr.length)
- console.log(num/arr.length)
- this.setState({
- speedProgress:num,
- },()=>{
- if(speed === 100){
- setTimeout(()=>{
- _this.setState({
- speedProgress:0,
- loading:false
- })
- },1200)
- }
- })
- }
- console.log('上传进度', res.progress)
- console.log('已经上传的数据长度', res.totalBytesSent)
- console.log('预期需要上传的数据总长度', res.totalBytesExpectedToSend)
- })
- }
- }
- }
- onFail(){
- }
- onImageClick(index){
- let arr = [];
- for(let i of this.state.files){
- arr.push(i.url)
- }
- Taro.previewImage({
- current: arr[index], // 当前显示图片的http链接
- urls: arr // 需要预览的图片http链接列表
- })
- }
- clear(){
- this.setState({
- files:[]
- })
- }
- render() {
- return (
- <>
- <AtImagePicker
- multiple
- mode='scaleToFill'
- showAddBtn={this.props.showAddBtn}
- files={this.state.files}
- onChange={this.onImgChange}
- onFail={this.onFail}
- onImageClick={this.onImageClick}
- />
- <AtToast isOpened={this.state.loading} text="图片上传中" status='loading'/>
- </>
- )
- }
- }
- export default ImagePicker;
|