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

<template>
	<view class="upload-btn" @click="showActionSheet">
		<text>+</text>

	</view>
	<viwe v-if="bottomText" class="bottom-text">
		{{bottomText}}
	</viwe>
</template>

<script>
	import {
		getAliyunPolicy
	} from "@/api/jiazheng.js"
	export default {
		props: {
			bottomText: { // 试题序号
				type: String
			}
		},
		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 => {
						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) {
										const imageUrl = `${policyData.downloadUrl}/${policyData.key}`;
										uni.showToast({
											title: '上传成功',
											icon: 'success'
										});
										console.log('imageUrl', imageUrl);
										//this.$emit('getFileUrl', 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>
<style scoped>
	.upload-btn {
		width: 100px;
		height: 100px;
		border: 1px dashed #ccc;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24px;
		color: #ccc;
		margin: 5px;
		border-radius: 5px;
	}

	.bottom-text {
		font-size: 12px;
		color: #bdbdbd;
		
	}
</style>