uni-app 上传图片,操作相册实现滑动选择多张图片

发布于 1周前 作者 eggper 来自 Uni-App

uni-app 上传图片,操作相册实现滑动选择多张图片

uniapp 上传图片,操作相册实现滑动选择多张图片

eeaafebf1febc483b32c56cfafbbb444.rar


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>

解释

  1. 模板部分:包含一个按钮用于触发选择图片的操作,以及一个 scroll-view 用于展示选中的图片。
  2. 脚本部分:在 data 中定义了一个 images 数组来存储选中的图片路径。chooseImages 方法使用 uni.chooseImage API 来允许用户从相册或相机选择图片,并将选中的图片路径添加到 images 数组中。
  3. 样式部分:简单定义了容器和图片的样式,使得图片能够横向排列并在 scroll-view 中滚动显示。

这个示例展示了如何在 uni-app 中实现上传图片并通过滑动选择多张图片的基本功能。你可以根据实际需求进一步调整样式和功能。

回到顶部