uniapp-图片上传到阿里云

 效果展示，如下图：

步骤：
1.获取阿里云的接口上传信息
2.获取本地文件file准备上传
3.根据选择的file和上传信息传到阿里云
4.上传后根据指定的格式拼接把图片回显到前端页面中

代码如下：

<template>		
        <view class="upload">
			<view class="title">
				<img class="line" src="@/static/base/title-left.png" alt="" />
				上传图片或视频({{images.length}}/3)
			</view>
			<view class="img-list">
				<view class="upload-img" v-for="(item,index) in images" :key="index">
					<img class="upload-icon" :src="item" />
					<img class="delete-icon" src="@/static/base/delete.png" alt="" @click="deleteImg(index)" />
				</view>
				<view v-if="images.length<3" class="upload-icon" @click="chooseImage">
					<img class="icon" src="@/static/base/upload.png" alt="" />
				</view>
			</view>
		</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		getCurrentInstance
	} from 'vue'
	import {
		getSignature,
		getUploader,
		postFeedbacks
	} from '@/api/base.js'

	const loading = ref(false) // loading
	const content = ref('') // 意见反馈
	const images = ref([]) // 上传的图片
	const clickImgIndex = ref('')

	const imgData = ref({})
	const userImageKey = ref('')
	const userImageHost = ref('')

	onMounted(async () => {
		// 获取上传信息
		uni.request({
			url: 'xxxxxxxxxxxxxxxxxxxxx', // 你的API地址
			method: 'GET',
			success: (res) => {
				if (res.data.code == 200) {
					const {
						accessid,
						policy,
						signature
					} = res.data.data
					imgData.value[`OSSAccessKeyId`] = accessid
					imgData.value[`policy`] = policy
					imgData.value[`signature`] = signature
					imgData.value[`success_active_status`] = 200
					userImageHost.value = res.data.data.host
					userImageKey.value = res.data.data.dir + '/'
				}
			},
			fail: (err) => {
				console.error('GET请求失败', err);
			}
		});
	})

	// 点击上传按钮
	const chooseImage = () => {
		uni.chooseImage({
			count: 1, // 允许选择的图片数量
			sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图
			sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机
			success: (res) => {
				// res.tempFilePaths为选中图片的本地文件路径列表
				const d = new Date().getTime()
				const fileName = `${d}.jpg`
				const k = `${userImageKey.value}${fileName}`
				imgData.value[`key`] = k
				uploadImage(res.tempFilePaths[0]); // 调用上传图片的方法
			},
			fail: (err) => {
				console.error('选择图片失败', err);
			}
		});
	}

	// 图片上传到服务器
	const uploadImage = (filePath) => {
		uni.uploadFile({
			url: userImageHost.value, // 后端接口地址
			filePath: filePath,
			name: 'file', // 后端接收的文件参数名
			formData: {
				...imgData.value
			},
			success: (uploadFileRes) => {
				// 上传成功后的回调
				images.value.push(userImageHost.value + '/' + imgData.value[`key`])
			},
			fail: (err) => {
				console.error('上传失败', err);
			}
		});
	}

	// 获取当前组件实例
	const {
		ctx
	} = getCurrentInstance();

	// 图片删除
	const deleteImg = (index) => {
		clickImgIndex.value = index
		ctx.$refs.alertDialog.open()
	}

	// 弹窗确定
	const dialogConfirm = () => images.value.splice(clickImgIndex.value, 1)

	// 弹窗取消
	const dialogClose = () => ctx.$refs.alertDialog.close()

</script>

 注意：
1.功能实现后小程序不能直接使用上传，需要进行服务器域名配置
2.上传可能需要用到多个接口，域名可能会不同，所以都得配置