[server]基于uniapp创建小程序并上传照片到阿里云OSS

最新推荐文章于 2025-07-20 20:28:15 发布

原创

最新推荐文章于 2025-07-20 20:28:15 发布 · 5.7k 阅读

16 ·

CC 4.0 BY-SA版权

文章标签：

#server #uniapp #阿里云 #微信小程序 #OSS

先说在前头，最近忙，随想随记，所以有些博客写了一半就发了，后续会慢慢补齐的。抱歉！

前端使用uniapp开发，后台挂在阿里云。选uniapp开发的原因是我这边人手不够，同时也不想维护这么多客户端，故选之。
新建一个uniapp工程，选择hello demo，找到pages/API/upload-file.vue文件

<template>
	<view>
		<page-head :title="title"></page-head>
		<view class="uni-padding-wrap uni-common-mt">
			<view class="demo">
				<block v-if="imageSrc">
					<image :src="imageSrc" class="image" mode="widthFix"></image>
				</block>
				<block v-else>
					<view class="uni-hello-addfile" @click="chooseImage">+ 选择图片</view>
				</block>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
   
   
		data() {
   
   
			return {
   
   
				title: 'uploadFile',
				imageSrc: ''
			}
		},
		onUnload() {
   
   
			this.imageSrc = '';
		},
		methods: {
   
   
			chooseImage: function() {
   
   
				uni.chooseImage({
   
   
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album'],
					success: (res) => {
   
   
						console.log('chooseImage success, temp path is', res.tempFilePaths[0])
						var imageSrc = res.tempFilePaths[0]
						uni.uploadFile({
   
   
							url: 'http://yourbucketname.oss-cn-shanghai.aliyuncs.com',
							filePath: imageSrc,
							fileType: 'image',
							name: 'file',
							formData: