uniapp选着图片

### 实现 UniApp 中选择图片功能 在 UniApp 中实现选择图片的功能可以通过 `uni.chooseImage` API 来完成。此 API 支持从相册或相机获取图片，并允许设置诸如图片的数量和尺寸等参数[^1]。 #### HTML 结构 为了提供用户界面来触发图片选择操作以及展示已选中的图片，HTML 部分定义了一个视图容器用于显示当前所选的每张图片的小部件列表。如果已经选择了少于最大限制数目的图片，则会额外显示一个加号按钮让用户继续添加新图片： ```html <view class="upload_info"> <!-- 循环渲染已有的图片 --> <view class="upload_item" v-for="(item, index) of gallery" :key="index"> <image :src="item" mode="aspectFill"></image> <text class="delete" @click="onDeleteImg(index)">删除</text> </view> <!-- 如果未达到上限则显示上传图标 --> <view class="upload_item upload_img" @click="onImgsUpload" v-if="gallery.length < 8">+</view> </view> ``` #### JavaScript 方法 接下来，在脚本部分编写处理逻辑。这里包含了两个核心函数：一个是用来打开图片选择器 (`onImgsUpload`)；另一个是用来移除特定索引位置上的已有图片(`onDeleteImg`)。当调用 `uni.chooseImage()` 后，它返回的对象中包含有本地临时路径数组，这些路径可以直接赋给 `<image>` 组件作为其源地址使用。 ```javascript export default { data() { return { gallery: [] // 存储选定图像的数据绑定变量 }; }, methods: { onImgsUpload() { uni.chooseImage({ count: 8 - this.gallery.length, sizeType: ['original', 'compressed'], sourceType: ['album'], // 可以更改为['camera']仅限拍照 或者 ['album','camera'] success(res) { const tempFilePaths = res.tempFilePaths; console.log(tempFilePaths); // 更新数据模型并重新渲染页面 this.gallery.push(...tempFilePaths); // 这里还可以加入上传到服务器的相关代码... }.bind(this), fail(err){ console.error('Failed to choose image:', err); } }); }, onDeleteImg(index) { this.gallery.splice(index, 1); // 移除对应索引处的照片 } } } ``` 上述代码片段展示了如何利用 `uni.chooseImage` 接口配合 Vue.js 的响应式特性轻松构建出一套完整的前端图片选取机制[^3]。