dev/dcp-app-gate/pages/conference/conferenceOfflineZh/uni-list-item-upload.vue

<template>
	<view>
		<uni-nav-bar
			status-bar = true
			fixed = true
			left-icon="arrowthinleft" 	
			background-color="#03b6b3"
			color="#ffffff"
			@clickLeft="navigateBack">
			<text slot="default" style="text-align: center; flex: 1; font-size: 18px; font-weight: bold;">照片</text>
			<button slot="right" @click="handleClick" size="mini" style="height: 30px; color: #FFFFFF; background-color: #1e9694; padding: 0 10px">确定</button>
		</uni-nav-bar>
		<view class="file-container">
			<view class="file-view" @click="upLoadImg">
				<image v-if="imageUrl" :src="websiteUrl+imageUrl" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				Authorization: {},
				imageUrl: ''
			}
		},
		mounted() {
			this.upLoadImg();
		},
		methods: {
			upLoadImg(){
				this.Authorization.Authorization =  'Bearer ' + uni.getStorageSync('Auth-Token');
				uni.chooseImage({
				    success: (chooseImageRes) => {
				        const tempFilePaths = chooseImageRes.tempFilePaths;
				        uni.uploadFile({
							url: this.uploadUrl,
							// url: 'http://10.0.1.160:7000/meeting/upload/file/',
				            // url: 'http://localhost:8080/api/meeting/upload/file/',
				            filePath: tempFilePaths[0],
				            name: 'upload',
							header: this.Authorization,
				            formData: {
				                'user': 'test'
				            },
				            success: (uploadFileRes) => {
								console.log('uploadFileRes', uploadFileRes);
								this.imageUrl = JSON.parse(uploadFileRes.data).data.path;
								this.$emit('input', this.imageUrl);
				            },
							fail:(error) => {
								console.log(error)
							}
				        });
				    }
				});
			},
			handleClick(){
				const eventChannel = this.getOpenerEventChannel()
				eventChannel.emit('acceptImageUrl', {url: this.imageUrl});
				uni.navigateBack()
			},
			navigateBack(){
				uni.navigateBack()
			}
		}
	}
</script>

<style scoped>
	.file-container{
		width: 100vw;
		height: calc(100vh - 44px);
		background-color: #333333;
		position: relative;
	}
	
	.file-view {
		/* 照片比例 5:7 */
		width: 90vw;
		height: 126vw;
		background: #FFFFFF;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		border: 1px dashed #333333;
	}
	.file-view::after{
		content: '+';
		position: absolute;
		top: 50%;
		left: 50%;
		font-size: 160rpx;
		color: #666;
		transform: translate(-50%, -50%);
	}
	.file-view image{
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: 9;
	}
</style>