小程序上传图片

web_sunn

已于 2022-11-22 13:55:10 修改

阅读量94

点赞数

文章标签： javascript 前端开发语言

于 2022-11-22 13:54:24 首次发布

本文链接：https://blog.csdn.net/web_sunn/article/details/127981476

版权

const app = getApp()
var {
	getToken
} = require('../../../../utils/util.js')
const config = require('../../../../utils/config')
Page({

	/**
	 * 页面的初始数据
	 */
	data: {
		navH: '',
		eyeImg: [], //小眼睛数据截图
		noteImg: [], //笔记小眼睛截图
		selectType: '', //从那个截图进来的
		isDisabled: false, //上传数据是否可以点击
		inpWord: '', //点击数据
		item: {}, //对应item
		isUpload: true //是上传数据还是查看数据
	},

	/**
	 * 生命周期函数--监听页面加载
	 */
	onLoad(options) {
		let item = ''
		if (options.item) {
			item = JSON.parse(options.item)
		}
		console.log(item);
		this.setData({
			navH: app.globalData.navHeight,
			isUpload: item.is_remind == 3,
			item
		})
		/* 查看数据获取详情 */
		if (item.is_remind == 4) {
			this.getData()
		}
	},

	/**
	 * 生命周期函数--监听页面初次渲染完成
	 */
	onReady() {

	},

	/**
	 * 生命周期函数--监听页面显示
	 */
	onShow() {

	},
	/* 获取数据 */
	getData() {
		let { item } = this.data
		app.post('task@getData', {
			task_id: item.id,
		}).then(res => {
			if (res.code === 200) {
				let { imgs, view_num } = res.data
				this.setData({
					inpWord: view_num,
					eyeImg: [imgs.view_img],
					noteImg: [imgs.view_item_img]
				})
			} else {
				console.error(res.msg);
			}
		})
	},
	/* 上传数据 */
	uploadData() {
		let { inpWord, eyeImg, noteImg, item } = this.data
		app.post('task@uploadData', {
			task_id: item.id,
			view_num: inpWord || '',
			view_img: eyeImg[0] || '',
			view_item_img: noteImg[0] || ''
		}).then(res => {
			if (res.code === 200) {
				wx.showToast({
					title: '上传成功',
					icon: 'none',
					duration: 2000
				})
				setTimeout(() => {
					this.goBack()
				}, 2000)
			} else {
				console.error(res.msg);
			}
		}).catch(res => {
			console.error(res.msg);
		})
	},
	/* input失焦验证 */
	blurData() {
		this.checkData()
	},
	/* 检查是否都满足条件 */
	checkData() {
		let { inpWord, eyeImg, noteImg } = this.data
		if (inpWord && eyeImg.length > 0 && noteImg.length > 0) {
			this.setData({
				isDisabled: true
			})
		} else {
			this.setData({
				isDisabled: false
			})
		}
	},
	/* 跳转如何获取截图 */
	goHowGetData(e) {
		let type = e.currentTarget.dataset.type
		wx.navigateTo({
			url: `/pages/task/pages/uploadData/howGetData/index?type=${type}&&platform_type=${this.data.item.platform_type}`,
		})
	},
	// 返回按钮
	goBack() {
		let page = getCurrentPages().length;
		if (page < 2) {
			wx.switchTab({
				url: '/pages/main/order/index',
			})
		} else {
			wx.navigateBack({
				delta: 1,
			});
		}
	},
	/* 预览功能 */
	previewImg: function (e) {
		let selectType = e.currentTarget.dataset.type
		let index = e.target.dataset.index;
		let preImgs = this.data[selectType].map(item => config.staticUrl + item)
		wx.previewImage({
			current: preImgs[index],
			urls: preImgs
		})
	},
	/* 上传选项框 */
	actioncnt: function (e) {
		this.setData({
			selectType: e.currentTarget.dataset.type //eyeImg是上传小眼睛截图
		})
		this.chooseSource()
	},
	// 点击选择图片
	chooseSource: function () {
		var _this = this;
		wx.showActionSheet({
			itemList: ["拍照", "从相册中选择"],
			itemColor: "#000000",
			success: function (res) {
				if (!res.cancel) {
					if (res.tapIndex == 0) {
						_this.imgWShow("camera") //拍照
					} else if (res.tapIndex == 1) {
						_this.imgWShow("album") //相册
					}
				}
			}
		})
	},
	// 点击调用手机相册/拍照
	imgWShow: function (type) {
		var _this = this;
		/* 	let len = 0;
				if (_this.data.imgList != null) {
					len = _this.data.imgList.length
				}
				if (len == 9) {
					wx.showToast({
						title: '最多上传9张图片',
						icon: 'none'
					})
					return
				} */
		wx.chooseImage({
			count: 1,//选择图片数量
			sizeType: ['compressed'],//压缩图
			sourceType: [type],//选择图片来源  相机或者图片
			success: function (res) {
				var imgList = res.tempFilePaths //选中的图片路径数组形式
				//let tempFilePathsImg = _this.data.imgList ? _this.data.imgList : []  //查看是否是多选数量上传
				//var tempFilePathsImgs = tempFilePathsImg.concat(imgList) //合并原本上传的
				_this.setData({
					[`${_this.data.selectType}`]: imgList
				})
				/* 上传 */
				_this.uploadimagFile()
			},
			fail: function () {
				wx.showToast({
					title: '图片上传失败',
					icon: 'none'
				})
				return;
			}
		})
	},
	uploadimagFile() {
		const that = this;
		let selectType = that.data.selectType
		let imgListData = that.data[selectType];
		wx.showLoading({
			title: '图片上传中',
			mask: true
		});
		/* sloop上传成功 floop上传失败  */
		var sloop = 0, floop = 0
		for (let i = 0; i < imgListData.length; i++) {
			let uploadPath = imgListData[i]
			if (uploadPath.indexOf('/') == -1 || uploadPath.indexOf('superhub.com') != -1) {
				/* 上传成功加一并跳出本次上传 */
				sloop++
				that.checkImageUploadStatus(sloop, floop)
				continue
			}
			wx.uploadFile({
				header: {
					'content-type': 'multipart/form-data',
					'token': getToken(),
					'source': 'mini'
				},
				url: config.baseServer,
				formData: { api: 'file@upload' },
				name: 'filename',
				filePath: uploadPath,
				success(res) {
					let imgPath_url = [];
					imgPath_url = JSON.parse(res.data).data.img;//获取路径

					imgListData[i] = imgPath_url
					/* 上传成功加一 */
					sloop++
					that.setData({
						[`${imgListData}`]: imgListData
					})
					that.checkImageUploadStatus(sloop, floop)
				},
				fail: function (res) {
					floop++
					that.checkImageUploadStatus(sloop, floop)
				}
			})
		}
	},

	checkImageUploadStatus(sloop, floop = 0) {
		const _this = this
		let selectType = _this.data.selectType
		/* 如果全部上传成功 */
		if (sloop == this.data[selectType].length) {
			this.checkData()
			wx.showToast({
				title: '图片上传成功',
				mask: true,
				icon: 'success',
			})
			/* 一部分没有上传成功 */
		} else if (sloop + floop == this.data.imgList.length) {
			wx.showToast({
				title: '网络开小差了，请重新上传',
				mask: true,
				icon: 'none',
				duration: 200
			})
			wx.showModal({
				title: '提示',
				content: '网络开小差了，请重新上传',
				showCancel: false,
				success(res) {
					/* 直接重新上传而不是重新选择 */
					_this.uploadimagFile()
				}
			})
		} else {
		}
	},
	/**
	 * 点击删除图片
	 */
	deleteImg: function (e) {
		let { type: selectType, index } = e.currentTarget.dataset
		var _this = this;
		var imgList = _this.data[selectType]; //正在操作的数组
		wx.showModal({
			title: '提示',
			content: '确认要删除该图片吗?',
			duration: 500,
			success: function (res) {
				if (res.confirm) {
					imgList.splice(index, 1); //删除当前
				} else if (res.cancel) {
					return false
				}
				_this.setData({
					[`${selectType}`]: imgList //重新赋值
				})
				_this.checkData()
			}
		})
	},
	/**
	 * 生命周期函数--监听页面隐藏
	 */
	onHide() {

	},

	/**
	 * 生命周期函数--监听页面卸载
	 */
	onUnload() {

	},

	/**
	 * 页面相关事件处理函数--监听用户下拉动作
	 */
	onPullDownRefresh() {

	},

	/**
	 * 页面上拉触底事件的处理函数
	 */
	onReachBottom() {

	},

	/**
	 * 用户点击右上角分享
	 */
	onShareAppMessage() {

	}
})

<wxs src="/utils/util.wxs" module="tools" />
<block>
  <navbar navTitle="{{isUpload?'上传数据':'查看数据'}}" navH="{{navH}}" isShow="{{true}}" bind:OnClickBack="goBack"></navbar>
</block>
<view style="margin-top:{{navH}}px;" wx:if="{{isUpload}}">
  <view class="contaim_wrap">
    <!-- 数据展示 -->
    <view class="upload_data_wrap">
      <!-- title -->
      <view class="upload_data_nav">
        <view class="data_nav_left">点击数据</view>
        <view class="data_nav_right" data-type="1" bind:tap="goHowGetData">如何获取数据？</view>
      </view>
      <!-- 输入框 -->
      <input class="inp" placeholder="请输入点击数据" model:value="{{inpWord}}" bindblur="blurData" placeholder-class="inp_placeholder" disabled="{{false}}" type="text" />
      <!-- 上传截图 -->
      <view class="upload_img_title">请上传点击数据截图</view>
      <!-- 上传功能 -->
      <view class="img-li-box">
        <view class="img-li" data-type="eyeImg" catchtap="previewImg" wx:for="{{eyeImg}}" wx:for-item="item" wx:key="*this">
          <image class="uploading-icon" src="{{tools.imageAdjust(item,190)}}" wx:for-index="item" mode="aspectFill" data-index="{{index}}"></image>
          <image class="icon-delete" src="https://staticonline.superhub.com.cn/vg_icon/delete-fill-circle.png" data-index="{{index}}" data-type="eyeImg" catchtap="deleteImg"></image>
        </view>
        <view class="img-li" wx:if="{{eyeImg.length<1}}" data-type="eyeImg" bindtap="actioncnt">
          <image class="uploading-icon" src="https://staticonline.superhub.com.cn/icon/2022030411/plus_btn.png" style="border-radius: 0;"></image>
        </view>
      </view>
      <view class="driver"></view>
      <!-- title -->
      <view class="upload_data_nav" style="margin-top:40rpx;">
        <view class="data_nav_left">作品详情页截图</view>
        <view class="data_nav_right" data-type="2" bind:tap="goHowGetData">如何获取截图？</view>
      </view>
      <!-- 上传截图 -->
      <view class="upload_img_title" style="margin-top:20rpx;">请上传作品详情页截图</view>
      <!-- 上传功能 -->
      <view class="img-li-box">
        <view class="img-li" data-type="noteImg" catchtap="previewImg" wx:for="{{noteImg}}" wx:for-item="item" wx:key="*this">
          <image class="uploading-icon" src="{{tools.imageAdjust(item,190)}}" wx:for-index="item" mode="aspectFill" data-index="{{index}}"></image>
          <image class="icon-delete" src="https://staticonline.superhub.com.cn/vg_icon/delete-fill-circle.png" data-index="{{index}}" data-type="noteImg" catchtap="deleteImg"></image>
        </view>
        <view class="img-li" wx:if="{{noteImg.length<1}}" data-type="noteImg" bindtap="actioncnt">
          <image class="uploading-icon" src="https://staticonline.superhub.com.cn/icon/2022030411/plus_btn.png" style="border-radius: 0;"></image>
        </view>
      </view>
    </view>
  </view>
  <!-- 提交按钮 -->
  <view class="footer">
    <view class="upload_btn {{isDisabled?'active_btn':''}}" bind:tap="{{isDisabled?'uploadData':''}}">
      上传数据
    </view>
  </view>
</view>
<view style="margin-top:{{navH}}px;" wx:else>
  <view class="contaim_wrap">
    <view class="checkout_wrap">
      <view class="checkout_title">
        <view class="checkout_title_left">点击数据</view>
        <view class="checkout_title_right">{{inpWord}}</view>
      </view>
      <!-- title -->
      <view class="driver"></view>
      <view class="checkout_title2">点击数据截图</view>
      <view class="checkout_img" data-type="eyeImg" catchtap="previewImg">
        <image class="checkout_img_url"  src="{{tools.imageAdjust(eyeImg[0],190)}}" />
      </view>
      <view class="driver"></view>
      <view class="checkout_title2">作品详情页截图</view>
      <view class="checkout_img" data-type="noteImg" catchtap="previewImg">
        <image class="checkout_img_url" src="{{tools.imageAdjust(noteImg[0],190)}}"  />
      </view>
    </view>
  </view>
</view>

.contaim_wrap {
  padding-top: 1rpx;
  /* 查看样式 */
}
.contaim_wrap .upload_data_wrap {
  width: 702rpx;
  height: 943rpx;
  background: #FFFFFF;
  border-radius: 20rpx;
  margin: 23rpx auto 0;
  padding: 30rpx;
  /* 上传图片 */
  /* 分割线 */
}
.contaim_wrap .upload_data_wrap .upload_data_nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10rpx;
}
.contaim_wrap .upload_data_wrap .upload_data_nav .data_nav_left {
  height: 32rpx;
  font-size: 28rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #333333;
  line-height: 32rpx;
}
.contaim_wrap .upload_data_wrap .upload_data_nav .data_nav_right {
  height: 26rpx;
  font-size: 26rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #9D85FF;
  line-height: 26rpx;
}
.contaim_wrap .upload_data_wrap .inp {
  width: 642rpx;
  height: 88rpx;
  background: #FAFBFD;
  border-radius: 10rpx;
  border: 1rpx solid #DDDDDD;
  padding-left: 30rpx;
  margin-top: 30rpx;
  font-size: 28rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #333333;
  line-height: 88rpx;
}
.contaim_wrap .upload_data_wrap .inp_placeholder {
  font-size: 28rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #959698;
}
.contaim_wrap .upload_data_wrap .upload_img_title {
  height: 30rpx;
  font-size: 26rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #959595;
  line-height: 30rpx;
  margin-top: 40rpx;
}
.contaim_wrap .upload_data_wrap .img-li-box {
  width: 660rpx;
  display: flex;
  flex-wrap: wrap;
  margin-top: 30rpx;
  margin-bottom: 60rpx;
}
.contaim_wrap .upload_data_wrap .img-li-box .img-li {
  width: 190rpx;
  height: 190rpx;
  margin: 0;
  position: relative;
}
.contaim_wrap .upload_data_wrap .img-li-box .img-li image {
  width: 190rpx;
  height: 190rpx;
  border-radius: 10rpx;
}
.contaim_wrap .upload_data_wrap .img-li-box .img-li .icon-delete {
  width: 48rpx !important;
  height: 48rpx !important;
  position: absolute;
  top: -24rpx;
  right: -24rpx;
}
.contaim_wrap .upload_data_wrap .driver {
  width: 642rpx;
  height: 1rpx;
  background: #EEEEEE;
}
.contaim_wrap .checkout_wrap {
  width: 702rpx;
  height: 808rpx;
  background: #FFFFFF;
  border-radius: 20rpx;
  margin: auto;
  margin-top: 23rpx;
  /* 分割线 */
}
.contaim_wrap .checkout_wrap .checkout_title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 40rpx 45rpx 35rpx 30rpx;
}
.contaim_wrap .checkout_wrap .checkout_title .checkout_title_left {
  height: 32rpx;
  font-size: 28rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #333333;
  line-height: 32rpx;
}
.contaim_wrap .checkout_wrap .checkout_title .checkout_title_right {
  height: 32rpx;
  font-size: 28rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #333333;
  line-height: 32rpx;
}
.contaim_wrap .checkout_wrap .checkout_title2 {
  height: 32rpx;
  font-size: 28rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #333333;
  line-height: 32rpx;
  padding-left: 30rpx;
  margin-top: 40rpx;
}
.contaim_wrap .checkout_wrap .checkout_img {
  width: 190rpx;
  height: 190rpx;
  border-radius: 10rpx;
  margin-left: 30rpx;
  margin-top: 30rpx;
  margin-bottom: 60rpx;
}
.contaim_wrap .checkout_wrap .checkout_img .checkout_img_url {
  width: 190rpx;
  height: 190rpx;
  display: block;
  border-radius: 10rpx;
}
.contaim_wrap .checkout_wrap .driver {
  width: 642rpx;
  height: 1rpx;
  background: #EEEEEE;
  margin: auto;
}
/* 上传按钮 */
.footer {
  position: fixed;
  bottom: 0;
  width: 750rpx;
  background: #FFFFFF;
  padding: 16rpx 24rpx;
  box-shadow: 0px 4rpx 20rpx 0px rgba(0, 0, 0, 0.15);
  border-radius: 40rpx 40rpx 0px 0px;
  padding-bottom: calc(16rpx + constant(safe-area-inset-bottom));
  padding-bottom: calc(16rpx + env(safe-area-inset-bottom));
}
.footer .upload_btn {
  width: 702rpx;
  height: 88rpx;
  background: #CCCCCC;
  border-radius: 44rpx;
  font-size: 32rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #FFFFFF;
  line-height: 88rpx;
  text-align: center;
}
.footer .active_btn {
  width: 702rpx;
  height: 88rpx;
  background: linear-gradient(180deg, #CCBBFF 0%, #9D85FF 100%);
  border-radius: 44px;
  font-size: 32rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #FFFFFF;
  line-height: 88rpx;
  text-align: center;
}