concrete-transportation-uniapp-20250821/components/input-image.vue

<template>
	<view>
		<view class="iu b-relative">
			<view class="clicked" v-if="!url" @click="selectImage()">
				<view class="ii" :style="{'height': height+'rpx'}" v-if="!url && files.length<1"></view>
				<view class="ic">
					<image style="width: 110rpx; height: 110rpx;" src="/static/re/ico.png" />
				</view>
				<view class="im" :style="{'height': height+'rpx'}" v-if="!url && files.length>0">
					<image :style="{'height': height+'rpx'}" :src="files[0].path"
							mode="scaleToFill" class="im" />
				</view>
			</view>
			<view v-if="url" class="is" :style="{'height': 'auto'}" >
				<image :style="{'height': 'auto'}" :src="url"
						mode="widthFix" class="is" />
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		props: {
			height: {
			    type: Number,
			    required: false,
			    default: 342
			},
			module: {
			    type: String,
			    required: false,
			    default: "upload"
			},
			url: {
				type: String,
				required: false,
				default: ""
			}
		},
		data() {
			return {
				files: [],
				value: [],
				progress: 1,
				udata: {}
			}
		},
		methods: {
			selectImage(){
				const _this = this
				uni.chooseImage({
					count: 1,
					success: (res) => {
						//控制格式
						//if (["video/mp4", "video/ogg", "video/flv", "video/avi", "video/wmv", "video/rmvb", "video/mov",].indexOf(file.type) == -1) {
						//	this.$message.error("请上传正确的视频格式");
						//	return false;
						//}
						_this.files = res.tempFiles
						this.$httpGet("/oss/get", {}, (us) => {
							console.log('get', us);
							_this.udata = us.data
							_this.files.forEach(file => {
								_this.doUpload(file.path)
							})
						})
					}
				})
			},
			doUpload(filePath){
				const key = `${this.module}/${new Date().getTime()}.png`;
				uni.uploadFile({
					url: this.udata.host,
					filePath,
					name: 'file',
					formData: {
						key, 
						policy: this.udata.policy, //后台获取超时时间
						OSSAccessKeyId: this.udata.accessKeyId, //后台获取临时ID
						signature: this.udata.signature, //后台获取签名
						success_action_status: '200' //让服务端返回200,不然，默认会返回204
					},
					success: (res) => {
						console.log('oss', this.udata.host+"/"+key)
						//const cover = video + '?x-oss-process=video/snapshot,t_10,m_fast' // + ',w_' + this.width +',h_' + this.height + '
						this.$emit('success', this.udata.host+"/"+key)
					},
					fail: (err) => {
						console.log('oss', err)
					}
				})
			}
		},
	}
</script>

<style>
	.iu{
		width: 626rpx;
		min-height: 342rpx;
		height: auto;
		border-radius: 16px;
		margin: 15rpx auto;
	}
	
	.iu:active{
		transform: translateY(2rpx);
		box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.4);
		transition: transform 0.2s ease;
	}
	
	.ii{
		width: 626rpx;
		height: 342rpx;
		border-radius: 16rpx;
		filter: blur(3rpx);
		opacity: 0.89;
		background: rgba(41, 41, 41, 0.4);
		border: 1rpx dashed #ccc;
	}
	.ii:active{
		transform: translateY(2rpx);
		transition: transform 0.1s ease;
	}
	
	.im{
		width: 626rpx;
		height: 342rpx;
		border-radius: 16rpx;
		overflow: hidden;
	}
	.is{
		width: 626rpx;
		height: 342rpx;
		border-radius: 4rpx !important;
		overflow: hidden;
	}
	
	.ic{
		width: 110rpx;
		height: 110rpx;
		position: absolute;
		top: calc(50% - 55rpx);
		left: calc(50% - 55rpx);
	}
</style>