在uniapp中从本地相册选择图片或使用相机拍照-Toy模板网

这篇具有很好参考价值的文章主要介绍了在uniapp中从本地相册选择图片或使用相机拍照。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

在uniapp中从本地相册选择图片或使用相机拍照，可以使用uniapp中内置的API uni.chooseImage 。文章来源地址https://www.toymoban.com/news/detail-756126.html

参数

名称	类型	必填	默认值	描述
options	ChooseImageOptions	是	-	-

ChooseImageOptions 属性值

名称	类型	必备	默认值	描述
count	number	否	9	最多可以选择的图片张数，app端不限制，微信小程序最多可支持20个。
sizeType	Array<string>	否	['original','compressed']	original 原图，compressed 压缩图，默认二者都有
sourceType	Array<string>	否	['album','camera']	album 从相册选图，camera 使用相机，默认二者都有
extension	Array<string>	否	-	根据文件拓展名过滤，每一项都不能是空字符串。默认不过滤。仅H5支持
crop	ChooseImageCropOptions	否	-	图像裁剪参数，设置后 sizeType 失效。
success	(callback: ChooseImageSuccessCallback) => void	否	-	成功则返回图片的本地文件路径列表 tempFilePaths
fail	(callback: UniError) => void	否	-	接口调用失败的回调函数
complete	(callback: any) => void	否	-	接口调用结束的回调函数（调用成功、失败都会执行）

ChooseImageCropOptions 属性值

名称	类型	必备	默认值	描述
width	number	是	-	裁剪的宽度，单位为px，用于计算裁剪宽高比。
height	number	是	-	裁剪的高度，单位为px，用于计算裁剪宽高比。
quality	number	否	80	取值范围为1-100，数值越小，质量越低（仅对jpg格式有效）。默认值为80。
resize	boolean	否	-	是否将width和height作为裁剪保存图片真实的像素值。默认值为true。注：设置为false时在裁剪编辑界面显示图片的像素值，设置为true时不显示。

ChooseImageSuccessCallback 属性值

名称	类型	必备	默认值	描述
errSubject	string	是	-	调用API的名称
errMsg	string	是	-	-
tempFilePaths	Array<string>	是	-	-
tempFiles	any	是	-	-

chooseImage 兼容性

安卓系统版本	安卓 uni-app	安卓 uni-app-x	iOS 系统版本	iOS uni-app	iOS uni-app-x
4.4	√	3.9+	-	-	-

具体代码实现

<template>
  <view>
    <button @click="chooseImage">选择图片</button>
    <image v-for="(image, index) in images" :src="image" :key="index" mode="aspectFit"></image>
  </view>
</template>

<script>
export default {
  data() {
    return {
      images: [] // 存储选择的图片路径
    };
  },
  methods: {
    chooseImage() {
      uni.chooseImage({
        count: 6,  // 图片数量，这里设置为6
        sizeType: ['original', 'compressed'], // 指定选择的图片类型，可以选择原图和压缩图，这里设置为二者都有
        sourceType: ['album', 'camera'], // 指定选择图片的来源，这里设置为相册和相机
        success: (res) => {
          this.images.push(res.tempFilePaths);
        },
        fail: (err) => {
          console.log('选择图片失败', err);
        }
      });
    }
  }
};
</script>

到了这里，关于在uniapp中从本地相册选择图片或使用相机拍照的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！