使用uniapp开发h5,如何实现拍照上传或者选中图片上传
时间: 2024-03-10 13:44:48 浏览: 238
要实现拍照上传或者选中图片上传,可以使用uniapp中的uni.chooseImage()和uni.chooseVideo()方法。这两个方法可以让用户选择或拍摄图片/视频并上传到服务器。
示例代码如下:
```
<template>
<view>
<button @tap="chooseImage">选择图片</button>
<button @tap="chooseVideo">选择视频</button>
</view>
</template>
<script>
export default {
methods: {
// 选择图片
chooseImage() {
uni.chooseImage({
count: 1, // 最多可以选择的图片数量
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
success: (res) => {
const tempFilePaths = res.tempFilePaths // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
console.log(tempFilePaths)
// 将图片上传到服务器
},
fail: (err) => {
console.log(err)
}
})
},
// 选择视频
chooseVideo() {
uni.chooseVideo({
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
maxDuration: 60, // 拍摄视频最长拍摄时间,单位秒。最长支持60秒
camera: 'back', // 指定使用前置或后置摄像头,默认为前后都有,即:['front', 'back']
success: (res) => {
const tempFilePath = res.tempFilePath // 返回选定视频的临时文件路径
console.log(tempFilePath)
// 将视频上传到服务器
},
fail: (err) => {
console.log(err)
}
})
}
}
}
</script>
```
需要注意的是,选择图片和选择视频时需要用户授权,需要在manifest.json文件中配置权限。具体可以参考uniapp官方文档。
阅读全文