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

<template>
	<view v-if="changjingType =='shenfenzheng'" class="admin-upload-btn-box" @click="showActionSheet">
		<text v-if="!imageUrl">+</text>
		<image v-else style="width: 100rpx;height: 100rpx;"   :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 style="width: 100rpx;height: 100rpx;"   :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() {
				uni.showActionSheet({
					itemList: ['拍照', '从相册选择'],
					success: (res) => {
						if (res.tapIndex === 0) {
							this.chooseImage('camera');
						} else if (res.tapIndex === 1) {
							this.chooseImage('album');
						}
					}
				});
			},
			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);
							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>