提交小程序

components/upload/index.vue

@@ -0,0 +1,193 @@
+<template>
+	<view class="align-items" style="margin-top: 20px;margin-bottom: 20px;">
+		<view class="container" style="color: #b2b2b2;">*请上传照片</view>
+		<view class="" style="display: flex; flex-wrap: wrap;margin-top: 10px; margin-left: 10px;">
+			<image src="../../static/images/upload/updateimg.png" mode=""
+				style="width: 200rpx; height: 150rpx; margin: 0 12rpx; " @click="choose()"></image>
+			<view v-for="(item,index) in imgArr" :key="index" style="position: relative;">
+				<view
+					v-if="item.substring(item.length - 3) == 'png' || item.substring(item.length - 3) == 'jpg'||item.picUrl.substring(item.picUrl.length-4)=='jpeg' ">
+					<image :src="item" mode="" style="width: 100rpx; height: 100rpx; margin: 0 12rpx;"
+						@click="showPhoto(index)">
+					</image>
+				</view>
+				<view v-else>
+					<video :src="item" style="width: 100rpx; height: 100rpx; margin: 0 12rpx;"></video>
+				</view>
+				<view @click="remove(index)"
+					style="position: absolute; top: 0; right: 14rpx; border-radius: 50%;">
+					<image src="../../static/images/upload/icon_close.png" style=" width: 15px; height: 15px;">
+					</image>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				headers: {
+					Authorization: "Bearer " + getToken()
+				},
+				loading: false,
+				// imgArr: [],
+			}
+		},
+		props:{
+			imgArr:{
+				type: Array,
+				default: () => []
+			},
+		},
+		methods: {
+			//上传图片
+			choose() {
+				let _this = this;
+				uni.showActionSheet({
+					title: '上传',
+					itemList: ['图片', '视频'],
+					success: (res) => {
+						if (res.tapIndex == 0) {
+							this.chooseimage()
+						} else {
+							this.choosevideo()
+						}
+					}
+				})
+			},
+			chooseimage() {
+				let _this = this;
+				uni.chooseImage({
+					sizeType: ['album', 'camera'],
+					success(resp) {
+						resp.tempFiles.forEach((item, index) => {
+							const task = uni.uploadFile({
+								url: _this.$HTTP + `/obs`,
+								filePath: item.path,
+								name: 'file',
+								formData: {},
+								header: _this.headers,
+			
+								success: res => {
+									// 判断是否json字符串，将其转为json格式
+									let data = JSON.parse(res.data);
+									if (![200].includes(data.code)) {
+										_this.$modal.msg(data.msg)
+									} else {
+										if (_this.progress === 100) {
+											_this.imgArr.push(data.data.url)
+											_this.$modal.msg('上传成功！')
+											_this.photo = false;
+											this.$emit('updateImg',this.imgArr);
+										}
+									}
+								},
+								fail: e => {
+									console.log(e)
+									_this.$modal.msg('上传失败！')
+								},
+								complete: res => {
+									uni.hideLoading();
+									_this.uploading = false;
+			
+								}
+							});
+							task.onProgressUpdate(res => {
+								_this.progress = res.progress;
+								uni.showLoading({
+									title: '上传中'
+								})
+								if (_this.progress != 100) {
+									_this.loading = false
+								} else {
+									_this.loading = true
+								}
+							});
+			
+						})
+			
+					},
+				})
+			},
+			
+			choosevideo() {
+				let _this = this;
+				console.log('视频')
+				uni.chooseVideo({
+					sourceType: ['album', 'camera'],
+					maxDuration: 30,
+					success(resp) {
+						const task = uni.uploadFile({
+							url: _this.$HTTP + `/obs`,
+							filePath: resp.tempFilePath,
+							name: 'file',
+							formData: {},
+							header: _this.headers,
+							success: res => {
+								// 判断是否json字符串，将其转为json格式
+								let data = JSON.parse(res.data);
+								if (![200].includes(res.statusCode)) {
+									this.uploadError(index, data);
+								} else {
+									//上传成功
+									if (_this.progress === 100) {
+										_this.imgArr.push(data.data.url)
+										_this.$modal.msg('上传成功！')
+										_this.photo = false;
+										this.$emit('updateImg',this.imgArr);
+									}
+								}
+							},
+							fail: e => {
+								_this.$modal.msg('上传失败！')
+								this.uploadError(index, e);
+							},
+							complete: res => {
+								uni.hideLoading();
+								_this.uploading = false;
+							}
+						});
+						task.onProgressUpdate(res => {
+							_this.progress = res.progress;
+							uni.showLoading({
+								title: '上传中'
+							})
+							if (_this.progress != 100) {
+								_this.loading = false
+							} else {
+								_this.loading = true
+							}
+						});
+			
+					},
+				})
+			},
+			//查看图片
+			showPhoto(index) {
+				uni.previewImage({
+					current: index,
+					urls: this.imgArr,
+				})
+			},
+			//删除图片
+			remove(index) {
+				uni.showModal({
+					title: '提示',
+					content: '是否删除该图片或视频？',
+					success: (res) => {
+						if (res.confirm) {
+							this.imgArr.splice(index, 1);
+							this.$emit('updateImg',this.imgArr);
+						}
+					}
+				})
+			},
+		}
+	}
+	
+</script>
+
+<style>
+</style>

pages/wenba/wenba.vue

@@ -69,14 +69,22 @@
 
             <em class="iconfont icon-xiangyoujiantou"></em>
         </view>
+		<upload :imgArr="imageList" @updateImg="updateImg"></upload>
     </view>
 </template>
 
 <script>
-// pages/fuwu/fuwu.js
+import upload from '../../components/upload/index.vue'
 export default {
+	components: {
+		upload
+	},
     data() {
         return {
+			imageList:[
+				'http://119.3.201.155:9000/xczx01.png',
+				'http://119.3.201.155:9000/xczx02.png'
+			],
             wb: [
 				{
 					ck: '10',
@@ -124,7 +132,11 @@ export default {
             uni.navigateTo({
                 url: '/pages/wenbaxiangqing/wenbaxiangqing'
             });
-        }
+        },
+		
+		updateImg(imgList){
+			this.imageList = imgList;
+		}
     }
 };
 </script>