【uniapp小程序】上传图片_小程序 uni

示例

uni.chooseImage({
	count: 6, //默认9
	sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
	sourceType: ['album'], //从相册选择
	success: function (res) {
		console.log(JSON.stringify(res.tempFilePaths));
	}
});

2、案例代码演示

看了官网的案例 我们也来自己动手写一写。

• 本案例操作描述：默认显示添加封面按钮，点击调用本地图片选择上传一张作为封面使用，可进行切换。(忽略项目中比较丑陋的字体颜色，只做案例展示使用，与本人审美无关(狗头))
• 参数设置我在代码中都做了详细的解释，没有写的参数使用官网的默认值。
• 成功的回调函数success写了一种 ES5 的形式，写了一种 ES6 的形式供大家参考。
• 封面图片的src是用了动态赋值的方式(:src="cover")。

<template>
	<view>
		<view class="add-cover" @click="upload">
			<!-- 这里使用 :src="cover" 将src动态赋值-->
			<image class="cover" :src="cover" mode="aspectFill"></image>
			<view class="default">
				<image src="../../../static/add.png" class="add-icon"></image>
				<!-- 没有上传图片时状态是添加，上传版完毕是切换 -->
				<text>点击{{cover?'切换':'添加'}}封面</text>
			</view>
		</view>
	</view>
</template>

<script>
 export default {
 data() {
 return {
 cover: ''
 };
 },
 methods: {
 // 方式一：使用箭头函数
 upload() {
 uni.chooseImage({
 count: 1, //默认9,这里设置只允许选择一张图片
 sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
 sourceType: ['album'], //这里选择从相册选择，也可删除此项设置默认拍照和相册两种选择
 success: res => {
 // 实际开发中，成功的回调函数中是一个上传图片到服务器的接口，这里只是做了简单的效果，实际根据接口需要的参数格式进行上传
 // console.log(JSON.stringify(res.tempFilePaths)); 打印的结果是以数组方式返回的，所以我们只需要取第一个值：["blob:http://localhost:8080/c18cded6-ab83-4d0e-9ccd-ce2e402b7d3f"] 
 this.cover = res.tempFilePaths[0] // 将选择的图片赋值给我们定义的cover
 }
 });
 }
 
 
 // 方式二：不使用箭头函数（不使用箭头函数就需要定义变量去赋值this,如下\_this）
 // upload() {
 // var \_this = this
 // uni.chooseImage({
 // count: 1, //默认9,这里设置只允许选择一张图片
 // sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
 // sourceType: ['album'], //这里选择从相册选择，也可删除此项设置默认拍照和相册两种选择
 // success: function(res) {
 // \_this.cover = res.tempFilePaths[0]
 // }
 // });
 // }
 }
 }
</script>

<style lang="scss">
 .cover {
 width: 100%;
 height: 350rpx;
 }

 .default {
 background-color: #f8f9fc;
 width: 100%;
 height: 350rpx;
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 color: red;
 font-weight: 800;
 position: absolute;
 top: 0;
 background-color: rgba(255, 255, 255, 0.2);
 }

 .add-icon {
 width: 50rpx;
 height: 50rpx;
 margin-bottom: 20rpx;
 }
</style>

在此说明：本案例只做了本地上传图片的效果，没有调用接口上传到服务器，实际工作开发中是会有图片上传接口的，官网也提供了对应的将本地资源上传到开发者服务器API：uni.uploadFile(OBJECT)，大家可以去参考一下。如有实际开发接口问题可私信博主。

3、效果展示

?专栏分享：

⏳

名言警句：说能做的，做说过的

\textcolor{red} {名言警句：说能做的，做说过的}

名言警句：说能做的，做说过的

✨

原创不易，还希望各位大佬支持一下

\textcolor{blue}{原创不易，还希望各位大佬支持一下}

原创不易，还希望各位大佬支持一下

?

点赞，你的认可是我创作的动力！

\textcolor{green}{点赞，你的认可是我创作的动力！}

点赞，你的认可是我创作的动力！

⭐️

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上Go语言开发知识点，真正体系化！

力！

⭐️

[外链图片转存中…(img-WPJj6jiB-1726127797011)]
[外链图片转存中…(img-9QX2B6ME-1726127797012)]
[外链图片转存中…(img-QdTT9SRV-1726127797012)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上Go语言开发知识点，真正体系化！