首页uni.chooseImage上传图片后在界面上显示出来

uni.chooseImage上传图片后在界面上显示出来

时间: 2025-06-28 22:24:53 浏览: 6

### 实现 `uni.chooseImage` 后显示图片为了实现从本地相册选择图片或使用相机拍照后，在页面上展示所选图片的功能，可以按照如下方法操作： #### HTML 结构定义一个用于触发选择图片的操作按钮以及一个容器来放置预览的图片。 ```html <template> <view class="container">  <button type="primary" @click="chooseImage">选择图片</button>  <view v-if="tempFilePaths.length > 0" class="image-preview"> <image v-for="(path, index) in tempFilePaths" :key="index" :src="path" mode="aspectFit"></image> </view> </view> </template> ``` #### JavaScript 方法编写逻辑处理部分，通过调用 `uni.chooseImage()` 获取到临时文件路径并将其存储起来以便后续渲染。 ```javascript <script> export default { data() { return { tempFilePaths: [] // 存储选中的图片路径数组 }; }, methods: { chooseImage() { uni.chooseImage({ count: 9, sizeType: ['original', 'compressed'], sourceType: ['album', 'camera'], success(res) { this.tempFilePaths = res.tempFilePaths; }.bind(this), fail(err) { console.error('选择图片失败:', err); } }); } } }; </script> ``` 上述代码实现了点击按钮后弹出选择器让用户挑选照片，并将这些照片作为缩略图呈现在界面上[^1]。注意这里绑定了 `this` 上下文以确保能够正确更新组件状态。 #### 样式调整为了让布局更加美观合理，还可以适当添加一些样式规则。 ```css <style scoped> .container { padding: 20px; } .image-preview image { width: 100%; height: auto; } </style> ``` 这样就完成了一个简单的例子，展示了如何利用 `uni.chooseImage` API 来获取用户选取的照片并在前端页面中呈现出来。

阅读全文