sooka_consult_uniapp/components/upload/index.vue

<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>
	import { getToken } from '@/utils/auth'
	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 + `/common/upload`,
								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 + `/common/upload`,
							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>