uniProject/pages/admin/Jiazheng/common/jiazhengUpload.vue

<template>
	<view v-if="changjingType =='shenfenzheng'" class="sfz-upload-box" @click="showActionSheet">
		<view v-if="!imageUrl" class="sfz-content"><text>+</text> 添加身份证</view>
		<image class="sfz-image" v-else :src="imageUrl" mode=""></image>
	</view>

	<view v-else-if="changjingType =='more'" class="admin-upload-btn-box" @click="showActionSheet">
		<text>+</text>
	</view>
	<view v-else class="admin-upload-btn-box" @click="showActionSheet">
		<text v-if="!imageUrl">+</text>
		<image v-else class="other-image" :src="imageUrl" mode=""></image>
	</view>
	<view v-if="bottomText" class="upload-bottom-text">
		{{bottomText}}
	</view>
</template>

<script>
	import {
		getAliyunPolicy
	} from "@/api/jiazheng.js"
	export default {
		emits: ['getFileUrl'], // 声明自定义事件
		data() {
			return {
				imageUrl: ""
			}
		},
		props: {
			bottomText: { // 试题序号
				type: String
			},
			changjingType: {
				type: String,
				default: ''
			},
			img: {
				type: String,
				default: ''
			}
		},
		watch: {
			img: {
				handler(newVal) {
					this.imageUrl = newVal
				}
			},

		},
		methods: {
			showActionSheet() {

				// 判断是否是H5环境
				// #ifdef H5
				this.chooseImage('album'); // H5环境下直接选择相册
				// #endif

				// #ifndef H5
				uni.showActionSheet({
					itemList: ['拍照', '从相册选择'],
					success: (res) => {
						if (res.tapIndex === 0) {
							this.chooseImage('camera');
						} else if (res.tapIndex === 1) {
							this.chooseImage('album');
						}
					}
				});
				// #endif

			},
			chooseImage(sourceType) {
				uni.chooseImage({
					count: 1, // 只能选择一张图片
					sourceType: [sourceType], // 'camera' 或 'album'
					success: (res) => {
						const filePath = res.tempFilePaths[0];
						this.uploadFileToAliyun(filePath);
					}
				});
			},
			uploadFileToAliyun(filePath) {
				console.log('filePath', filePath);
				const loading = uni.showLoading({
					title: '上传中...',
					mask: true
				});
			
				try {
					const suffix = filePath.split('.').pop();
					let req = {
						prefix: 'resource/',
						suffix: suffix
					}
			
					getAliyunPolicy(req).then(res => {
						let that = this;
						if (res.code == 0) {
							const policyData = res.data;
							console.log('policyData', policyData);
			
							// #ifdef H5
							const formData = new FormData();
							formData.append('key', policyData.key);
							formData.append('policy', policyData.policy);
							formData.append('OSSAccessKeyId', policyData.accessid);
							formData.append('signature', policyData.signature);
							formData.append('success_action_status', '200');
		
							fetch(filePath)
								.then(response => response.blob())
								.then(blob => {
									formData.append('file', blob, policyData.key);
									fetch(policyData.uploadUrl, {
										method: 'POST',
										body: formData
									})
									.then(response => {
										if (response.ok) {
											that.imageUrl = `${policyData.downloadUrl}/${policyData.key}`;
											uni.showToast({
												title: '上传成功',
												icon: 'success'
											});
											that.$emit('getFileUrl', that.imageUrl);
										} else {
											uni.showToast({
												title: '上传失败',
											});
										}
									})
									.catch(error => {
										console.error('上传失败:', error);
										uni.showToast({
											title: '上传失败',
											icon: 'none'
										});
									});
								})
								.catch(error => {
									console.error('文件转换失败:', error);
									uni.showToast({
										title: '文件转换失败',
										icon: 'none'
									});
								});
							// #endif
			
							// #ifndef H5
							// 非 H5 环境下使用 uni.uploadFile 上传
							uni.uploadFile({
								url: policyData.uploadUrl,
								filePath: filePath,
								name: 'file',
								formData: {
									key: policyData.key,
									policy: policyData.policy,
									OSSAccessKeyId: policyData.accessid,
									signature: policyData.signature,
									success_action_status: '200'
								},
								header: {
									'Content-Type': 'multipart/form-data'
								},
								success(uploadRes) {
									console.log('uploadRes', uploadRes);
									if (uploadRes.statusCode === 200) {
										that.imageUrl = `${policyData.downloadUrl}/${policyData.key}`;
										uni.showToast({
											title: '上传成功',
											icon: 'success'
										});
										that.$emit('getFileUrl', that.imageUrl);
									} else {
										uni.showToast({
											title: '上传失败',
										});
									}
								},
								fail(err) {
									console.log('err', err);
								}
							});
							// #endif
			
						} else {
							uni.showToast({
								title: '获取凭证失败',
							});
						}
					});
				} catch (error) {
					uni.showToast({
						title: '上传失败',
						icon: 'none'
					});
					console.error('上传失败:', error);
				} finally {
					uni.hideLoading();
				}
			}
			// uploadFileToAliyun(filePath) {
			// 	console.log('filePath', filePath);
			// 	const loading = uni.showLoading({
			// 		title: '上传中...',
			// 		mask: true
			// 	});

			// 	try {
			// 		const suffix = filePath.split('.').pop();
			// 		let req = {
			// 			prefix: 'resource/',
			// 			suffix: suffix
			// 		}

			// 		getAliyunPolicy(req).then(res => {
			// 			let that = this
			// 			if (res.code == 0) {
			// 				const policyData = res.data;
			// 				console.log('policyData', policyData);
			// 				const formData = {
			// 					key: policyData.key,
			// 					policy: policyData.policy,
			// 					OSSAccessKeyId: policyData.accessid,
			// 					signature: policyData.signature,
			// 					success_action_status: '200',
			// 					file: {
			// 						name: policyData.key,
			// 						uri: filePath
			// 					}
			// 				};
			// 				uni.uploadFile({
			// 					url: policyData.uploadUrl,
			// 					filePath: filePath,
			// 					name: 'file',
			// 					formData: formData,
			// 					header: {
			// 						'Content-Type': 'multipart/form-data'
			// 					},
			// 					success(uploadRes) {
			// 						console.log('uploadRes', uploadRes);
			// 						if (uploadRes.statusCode === 200) {
			// 							that.imageUrl = `${policyData.downloadUrl}/${policyData.key}`;
			// 							uni.showToast({
			// 								title: '上传成功',
			// 								icon: 'success'
			// 							});
			// 							console.log('imageUrl', that.imageUrl);
			// 							that.$emit('getFileUrl', that.imageUrl);
			// 						} else {
			// 							uni.showToast({
			// 								title: '上传失败',
			// 							});
			// 							return false
			// 						}
			// 					},
			// 					fail(err) {
			// 						console.log('err', err);
			// 					}
			// 				});

			// 			} else {
			// 				uni.showToast({
			// 					title: '获取凭证失败',
			// 				});
			// 				return false
			// 			}
			// 		})
			// 	} catch (error) {
			// 		uni.showToast({
			// 			title: '上传失败',
			// 			icon: 'none'
			// 		});
			// 		console.error('上传失败:', error);
			// 	} finally {
			// 		uni.hideLoading();
			// 	}
			// },
		}
	};
</script>