index.jsx 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146
  1. import React,{Component} from "react";
  2. import Taro from '@tarojs/taro';
  3. import {Text, View} from "@tarojs/components";
  4. import {AtImagePicker,AtToast } from "taro-ui";
  5. import './index.less';
  6. import 'taro-ui/dist/style/components/image-picker.scss';
  7. import 'taro-ui/dist/style/components/icon.scss';
  8. import 'taro-ui/dist/style/components/toast.scss';
  9. import 'taro-ui/dist/style/components/icon.scss';
  10. import getBaseUrl from "../../../utils/servers/baseUrl";
  11. class ImagePicker extends Component{
  12. constructor(props) {
  13. super(props);
  14. this.state={
  15. files: props.files || [],
  16. speedProgress:0,
  17. loading:false
  18. }
  19. this.onImgChange = this.onImgChange.bind(this);
  20. this.onFail = this.onFail.bind(this);
  21. this.onImageClick = this.onImageClick.bind(this);
  22. }
  23. onImgChange(files, operationType, index, type){
  24. const BASE_URL = getBaseUrl(this.props.url);
  25. let token = Taro.getStorageSync('token');
  26. let _this = this;
  27. let filesArr = files.concat([]);
  28. if(operationType === 'remove'){
  29. this.props.onChange(index,'remove');
  30. this.setState({
  31. files:filesArr
  32. })
  33. }else{
  34. let fileArr = this.state.files.concat([]);
  35. let arr = type === 'camera' ? files : files.splice(fileArr.length,files.length - fileArr.length)
  36. this.setState({
  37. loading:true
  38. })
  39. for(let i = 0;i<arr.length;i++){
  40. const uploadTask = Taro.uploadFile({
  41. url: BASE_URL + this.props.url, //仅为示例,非真实的接口地址
  42. filePath: arr[i].url,
  43. name: 'file',
  44. header: {
  45. 'Accept':'application/json, text/javascript,',
  46. 'content-type': 'application/x-www-form-urlencoded; charset=UTF-8',
  47. 'token': token
  48. },
  49. success: function (res){
  50. let dataJson = JSON.parse(res.data)
  51. if(dataJson.error.length === 0){
  52. _this.props.onChange(dataJson.data,'add');
  53. _this.state.files.push(filesArr[i]);
  54. _this.setState({
  55. files:_this.state.files
  56. })
  57. }else{
  58. Taro.showToast({title:dataJson.error[0].message,icon:'none'})
  59. if(dataJson.error[0].field === '403'){
  60. _this.setState({
  61. loading:false
  62. })
  63. Taro.navigateTo({
  64. url: '/pages/login/index'
  65. })
  66. }
  67. }
  68. },
  69. fail: function (err){
  70. console.log(err);
  71. Taro.showToast({title:'系统错误,请稍后重试',icon:'none'});
  72. },
  73. complete: function(v){
  74. console.log(v)
  75. }
  76. })
  77. uploadTask.progress((res) => {
  78. if(res.progress === 100){
  79. let num = this.state.speedProgress+1;
  80. let speed = num/arr.length*100;
  81. console.log(num,arr.length)
  82. console.log(num/arr.length)
  83. this.setState({
  84. speedProgress:num,
  85. },()=>{
  86. if(speed === 100){
  87. setTimeout(()=>{
  88. _this.setState({
  89. speedProgress:0,
  90. loading:false
  91. })
  92. },1200)
  93. }
  94. })
  95. }
  96. console.log('上传进度', res.progress)
  97. console.log('已经上传的数据长度', res.totalBytesSent)
  98. console.log('预期需要上传的数据总长度', res.totalBytesExpectedToSend)
  99. })
  100. }
  101. }
  102. }
  103. onFail(){
  104. }
  105. onImageClick(index){
  106. let arr = [];
  107. for(let i of this.state.files){
  108. arr.push(i.url)
  109. }
  110. Taro.previewImage({
  111. current: arr[index], // 当前显示图片的http链接
  112. urls: arr // 需要预览的图片http链接列表
  113. })
  114. }
  115. clear(){
  116. this.setState({
  117. files:[]
  118. })
  119. }
  120. render() {
  121. return (
  122. <>
  123. <AtImagePicker
  124. multiple
  125. mode='center'
  126. showAddBtn={this.props.showAddBtn}
  127. files={this.state.files}
  128. onChange={this.onImgChange}
  129. onFail={this.onFail}
  130. onImageClick={this.onImageClick}
  131. />
  132. <AtToast isOpened={this.state.loading} text="图片上传中" status='loading'/>
  133. </>
  134. )
  135. }
  136. }
  137. export default ImagePicker;