uni-app 上传图片,操作相册实现滑动选择多张图片
2 回复
可以做
专业插件开发 q 1196097915
主页 https://ask.dcloud.net.cn/question/91948
在 uni-app
中实现上传图片并操作相册进行滑动选择多张图片的功能,你可以使用 uni.chooseImage
API。这个 API 允许用户从相册选择图片,并且可以设置参数来支持多选。以下是一个简单的代码示例,展示了如何实现这个功能。
首先,确保你的 uni-app
项目已经正确配置并运行。
页面代码 (例如:pages/index/index.vue
)
<template>
<view class="container">
<button @click="chooseImages">选择图片</button>
<scroll-view scroll-y="true" class="image-scroll-view">
<view v-for="(image, index) in images" :key="index" class="image-item">
<image :src="image" mode="aspectFill"></image>
</view>
</scroll-view>
</view>
</template>
<script>
export default {
data() {
return {
images: []
};
},
methods: {
chooseImages() {
uni.chooseImage({
count: 9, // 最多可以选择的图片张数
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
success: (res) => {
// tempFilePaths是图片的本地文件路径列表
this.images = this.images.concat(res.tempFilePaths);
},
fail: (err) => {
console.error('选择图片失败:', err);
}
});
}
}
};
</script>
<style>
.container {
padding: 20px;
}
.image-scroll-view {
height: 300px;
display: flex;
flex-wrap: wrap;
}
.image-item {
width: 33.33%;
padding: 5px;
box-sizing: border-box;
}
.image-item image {
width: 100%;
height: 100%;
}
</style>
解释
- 模板部分:包含一个按钮用于触发选择图片的操作,以及一个
scroll-view
用于展示选中的图片。 - 脚本部分:在
data
中定义了一个images
数组来存储选中的图片路径。chooseImages
方法使用uni.chooseImage
API 来允许用户从相册或相机选择图片,并将选中的图片路径添加到images
数组中。 - 样式部分:简单定义了容器和图片的样式,使得图片能够横向排列并在
scroll-view
中滚动显示。
这个示例展示了如何在 uni-app
中实现上传图片并通过滑动选择多张图片的基本功能。你可以根据实际需求进一步调整样式和功能。