index.jsx 4.3 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. 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. 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(arr[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.redirectTo({
  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='scaleToFill'
  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;