index.jsx 4.3 KB

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