zhywpt-h5/components/upload-car-img/upload-car-img - 副本.vue

<template>
	<view class="upload-car-img">
		<view class="picture-wrapper" @click="cardImageOcr">
			<view class="bg">
				<view class="">
					<view class="name">{{ dataList.title }}</view>
					<view class="value">{{ dataList.hint }}</view>
				</view>
				<image
					v-if="!uploadimges"
					class="icon"
					:src="handleImg(dataList.placeholderImg)"
				></image>
				<image v-else class="icon" :src="uploadimges"></image>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { handleToTypes } from '@/utils/utils';
import { translate } from '@/utils/getLessLimitSizeImage';
import { fileURL } from '@/utils/network/api.js';
import { apiUrl } from '@/utils/network/api';
const props = defineProps({
	dataList: {
		type: Object,
		default: () => {
			return {};
		}
	}
});
const handleImg = (url) => {
	// 判断如果头部为http开头
	const reg = /^https?:\/\/.*$/;
	if (reg.test(url)) {
		return url;
	} else {
		return fileURL + url;
	}
};

const emits = defineEmits(['uploadImgHandle']);
let uploadimges = ref('');
const cardImageOcr = () => {
	uni.chooseImage({
		count: 1, //只能选取一张照片
		sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
		sourceType: ['camera', 'album'], //从相册选择
		success: (res) => {
			// console.log(res.tempFiles[0]);
			// uni.showLoading({
			// 	title: '正在识别图片',
			// 	mask: true
			// });
			console.log(res, '图片地址');
			if (!res.tempFiles[0].path) {
				console.log(res, '没有图片地址');
				// uni.hideLoading()
				return;
			}
			uploadimges.value = res.tempFiles[0].path;

			let size = res.tempFiles[0].size;
			let name = res.tempFiles[0].name;
			let scall = (300 * 1024) / size;
			let types = handleToTypes();
			console.log(types, size / 1024 + 'K', size, name, '图片所有信息');
			console.log(res.tempFiles[0], '图片', res.tempFiles);
			if (scall > 1 || types === 'android') {
				scall = 1;
				uploadUrl(res.tempFiles[0], name, uploadimges.value);
			} else {
				console.log('压缩比', scall);
				translate(uploadimges.value, scall, name, (imgURL, file) => {
					uploadimges.value = imgURL;
					console.log(file, '压缩后的图片');
					uploadUrl(file, name, imgURL);
				});
			}

			// uni.showLoading({
			// 	title: '正在进行识别',
			// 	mask: true
			// });
		}
	});
};
const uploadUrl = (files, fileName, imgURL) => {
	// WARNING: For POST requests, body is set to null by browsers.
	var data = new FormData();
	data.append('bucket', 'default-bucket');
	data.append('file', files);
	var xhr = new XMLHttpRequest();
	console.log(xhr, 'xhr请求');
	xhr.withCredentials = true;
	xhr.timeout = 60000; // 超时时间，单位是毫秒
	xhr.addEventListener('readystatechange', function () {
		if (this.readyState === 4) {
			// uni.hideLoading()
			const data = JSON.parse(this.responseText).data;
			let url = data.ossFilePath;
			if (import.meta.env.VITE_APP_TYPE === 'production') {
				url = 'http://100.64.2.113:9000/default-bucket/' + url;
			} else {
				url = 'http://192.168.101.145:9000/default-bucket/' + url;
			}
			console.log(url, '图片地址');
			emits('uploadImgHandle', {
				path: imgURL,
				url,
				fileName
			});
		}
	});
	if (import.meta.env.DEV) {
		xhr.open('POST', '/minIo/upload');
	} else {
		xhr.open('POST', apiUrl + 'minIo/upload');
	}
	xhr.send(data);
};
</script>

<style lang="scss" scoped>
.picture-wrapper {
	margin: 10rpx 30rpx;

	.bg {
		background: #ffffff;
		box-shadow: 0rpx 4rpx 13rpx 3rpx rgba(223, 223, 223, 0.8);
		border-radius: 20rpx;
		padding: 40rpx;
		display: flex;
		// align-items: center;
		justify-content: space-between;

		.name {
			font-size: 34rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #000000;
			line-height: 34rpx;
		}

		.value {
			margin-top: 20rpx;
			font-size: 24rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #999999;
			line-height: 24rpx;
		}

		.tip {
			margin-top: 20rpx;
			text-align: center;
			width: 110rpx;
			height: 40rpx;
			background: rgba(33, 190, 177, 0.2);
			border-radius: 6rpx;

			.tip-value {
				font-size: 20rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #0a8f8a;
				line-height: 40rpx;
				opacity: 1;
			}
		}
	}

	.icon {
		width: 294rpx;
		height: 188rpx;
	}
}

.upload-car-bottom {
	font-size: 28rpx;
}
</style>