基于Taro的微信小程序多图上传

// 上传佐证组件代码
import Taro, { Component } from '@tarojs/taro'
import { View } from '@tarojs/components'import { AtImagePicker,AtButton } from 'taro-ui'
import { get } from '../../../utils/global_data'
import './index.scss'export default class UploadProof extends Component {constructor () {super(...arguments)this.state = {files: [],showUploadBtn:true,upLoadImg:[]}}setFatherUploadSrc = () =>{let {upLoadImg} = this.statelet str = upLoadImg.join(',');let item ={}item.evidence_url = strthis.props.onGetUpload(str)}componentWillMount () {}componentDidMount () { }componentDidShow () { }componentDidHide () { }onChange (v,doType,index) { // doType代表操作类型，移除图片和添加图片,index为移除图片时返回的图片下标if(doType==='remove'){this.setState((prevState)=>{let oldSendImg = prevState.upLoadImgoldSendImg.splice(oldSendImg[index],1) // 删除已上传的图片地址return ({files:v,upLoadImg:oldSendImg})},()=>{const {files} = this.statethis.setFatherUploadSrc()// 设置删除数据图片地址if(files.length===3){  // 最多三张图片 隐藏添加图片按钮this.setState({showUploadBtn:false})}else if(files.length===0){this.setState({upLoadImg:[]})}else{this.setState({showUploadBtn:true})}})}else{this.setState(()=>{return ({files:v})},()=>{const {files} = this.stateif(files.length===3){  // 最多三张图片 隐藏添加图片按钮this.setState({showUploadBtn:false})}else{this.setState({showUploadBtn:true})}})}}// 选择失败回调onFail (mes) {console.log(mes)}// 点击图片回调onImageClick (index, file) {console.log(index, file)}toUpload = () => {const { files } = this.stateif(files.length>0){const rootUrl = get('rootUrl') // 服务器地址const cookieData = Taro.getStorageSync('token')  // 图片上传需要单独写入tokenthis.uploadLoader({rootUrl,cookieData,path:files})}else{Taro.showToast({title: '请先点击+号选择图片',icon: 'none',duration: 2000})}}// 上传组件uploadLoader = (data)=>{let that = thislet i = data.i ? data.i : 0 // 当前所上传的图片位置let success=data.success?data.success:0//上传成功的个数let fail=data.fail?data.fail:0;//上传失败的个数Taro.showLoading({title: `正在上传第${i+1}张`})//发起上传Taro.uploadFile({url:data.rootUrl+'/app/index/uploadFile',header:{'content-type': 'multipart/form-data','cookie':'token='+data.cookieData // 上传需要单独处理cookie},name:'file',filePath:data.path[i].url,success: (resp) => {//图片上传成功，图片上传成功的变量+1let resultData= JSON.parse(resp.data)if(resultData.code === "0"){success++;this.setState((prevState)=>{let oldUpload = prevState.upLoadImgoldUpload.push(resultData.data)return({upLoadImg:oldUpload})},()=>{// setSate会合并所有的setState操作，所以在这里等待图片传完之后再调用设置url方法/** 该处十分重要**/this.setFatherUploadSrc()// 设置数据图片地址字段})}else{fail++;}},fail: () => {fail++;//图片上传失败，图片上传失败的变量+1},complete: () => {Taro.hideLoading()i++;//这个图片执行完上传后，开始上传下一张if(i==data.path.length){   //当图片传完时，停止调用Taro.showToast({title: '上传成功',icon: 'success',duration: 2000})console.log('成功：'+success+" 失败："+fail);}else{//若图片还没有传完，则继续调用函数data.i=i;data.success=success;data.fail=fail;that.uploadLoader(data);}}})}render () {const { showUploadBtn } =this.statereturn (<View className='poof_box'><AtImagePickermultiple={false}length={3}files={this.state.files}onChange={this.onChange.bind(this)}onFail={this.onFail.bind(this)}onImageClick={this.onImageClick.bind(this)}showAddBtn={showUploadBtn}/><AtButton type='primary' className='poof_submit_btn' onClick={this.toUpload}>上传佐证</AtButton></View>)}
}

基于Taro的微信小程序多图上传相关推荐

php微信小程序多图上传,tp5实现微信小程序多图片上传到服务器功能
最近在做一个教育类的小商城的微信小程序,用到了上传多个图片文件到服务器端,这里做一个讲解,希望对大家有所帮助. 1,小程序端: 在wxml文件中: 删除点击上传作业在js文件中: Page({ / ...
微信小程序多图上传带进度提示的代码实例
实例名称:多图上传进度提示适用范围:微信小程序基础库1.0.1及以上 page.js中书写代码片段如下 Page({data:{src:''},//上传事件upImage(e){wx.choose ...
小程序 | 微信小程序多图上传（点击上传、可修改删除与放大回显）
微信小程序实现多图上传需求文章目录基本图片处理 index.js(选择上传.点击回显.修改删除) index.js(实现循环多图上传数据库) 公共组件utils utils/common.util ...
微信小程序多图上传解决方案
为了使代码体积小我这里将多图上传封装到单独的一个js 页面的js调用他 // pages/home/home.jsvar upload = require('../../style/upload. ...
微信小程序多图上传/朋友圈传图效果【附完整源码】
效果图部分源代码 js文件: var uploadPicture = require('../Frameworks/common.js') //获取应用实例 const app = getApp() ...
uni-app 小程序多图上传
uni-app 小程序多图上传: 官方提示说,App支持多文件上传,微信小程序只支持单文件上传,传多个文件需要反复调用本API.所以跨端的写法就是循环调用本API 步骤: //1.首先通过 uni.c ...
uniapp 微信小程序开发图片上传压缩
uniapp 微信小程序开发图片上传压缩安卓上传图片并压缩思路全部代码安卓上传图片并压缩由于后端接口对图片的大小有限制,所以在上传图片是需要压缩处理: uni.chooseImage({c ...
微信小程序实现录音上传
微信小程序实现录音上传准备开始准备 1.微信开发者工具 2.Api文档开始打开微信开发者工具项目->新建项目选择小程序 appid是在微信公众平台申请的. 链接新建完成后,项目自 ...
微信小程序多文件上传之wx-multipart
微信小程序多文件上传之wx-multipart 前言:我后端写了个多文件上传接口,奈何前端同事说微信小程序只能单文件上传,要支持多文件上传还要我单独再写一个单文件上传的接口,我他喵- 我看了下微信小程 ...

基于Taro的微信小程序多图上传

基于Taro的微信小程序多图上传相关推荐

最新文章

热门文章