学习目标：

• 使用 XHbuilder 编辑器 uniapp开发 app 中使用手机本相机可直接拍摄照片进行上传，也可以选择相册进行上传

---

学习内容：

相关内容

1. 上传图片
2. 上传时调用的相关方法
3. 配置的相关模块
4. 需要配置的相关权限

---

知识小结：

总结：

• 1、上传图片

<view class="uni-form-item"><view class="title">主图</view><view class="content"><view class="grid col-4 grid-square flex-sub"><view class="bg-img" v-for="(item,index) in imageList" :key="index" @tap="ViewMainImage" :data-url="baseUrl + imageList[index].url"><image :src="baseUrl + item.url" mode="aspectFill"></image><view class="cu-tag bg-red" @tap.stop="DelMainImg" :data-index="index"><text class='cuIcon-close'></text></view></view><view class="solids" @tap="ChooseMainImage" v-if="imageList.length<1"><text class='cuIcon-camera'></text></view></view></view></view>

• 2、调用的方法

     //选择图片ChooseMainImage() {uni.chooseImage({count: 10, //默认9sizeType: ['original', 'compressed'],  //可以指定是原图还是压缩图，默认二者都有sourceType: ['album','camera'],   //从相册选择，也可以使用相机直接拍照上传success: (res) => {var imagePathArr =res.tempFilePathsuni.showToast({title: '上传进度：0/' + imagePathArr.length,icon: 'none',mask: false});var remoteIndexStart = this.imageList.length - imagePathArr.length	var promiseWorkList = []var keyname = (this.fileKeyName ? this.fileKeyName : 'file')var completeImages = 0for (let i = 0; i < imagePathArr.length; i++) {promiseWorkList.push(new Promise((resolve, reject) => {let header = {"Mema-Token":this.$api.config.header["Mema-Token"]};let remoteUrlIndex = remoteIndexStart + i;uni.uploadFile({url: this.imageServerUrl,// methods: 'POST',// fileType: 'image',header: header,formData: this.uploadDataMain,filePath: imagePathArr[i],name: keyname,success: function(res) {if (res.statusCode === 200) {var jsonData = JSON.parse(res.data);if(jsonData.code == 0){completeImages++uni.showToast({title: '上传进度：' + completeImages + '/' + imagePathArr.length,icon: 'none',mask: false,duration: 500});resolve(jsonData.data)}else{uni.showToast({icon: 'none',position: 'bottom',title: jsonData.msg});}} else {reject('fail to upload image:' + remoteUrlIndex)}},fail: function(res) {reject('fail to upload image:' + remoteUrlIndex)}})}))}Promise.all(promiseWorkList).then((result) => {for (let i = 0; i < result.length; i++) {// result[i].url = this.$api.config.baseUrl + result[i].urlthis.imageList.push(result[i])}})}});},

	//查看主图ViewMainImage(e) {var images = [];for (let i = 0; i < this.imageList.length; i++) {images.push(this.$api.config.baseUrl + this.imageList[i].url)}uni.previewImage({urls: images,current: e.currentTarget.dataset.url});},

	//删除主图DelMainImg(e) {var imgObj = this.imageList[e.currentTarget.dataset.index]uni.showModal({title: '删除图片',content: '确定要删除吗？',cancelText: '再看看',confirmText: '确认删除',success: res => {if (res.confirm) {this.pic=""this.imageList = []}}})},

• 3、APP 模块配置
  在 app 模块配置中 ，需勾选 Camera & Gallery(相机和相册) 模块配置
  

• 4、App 权限配置
  使用 uni-app 相机拍摄照片 需开启相应的权限配置
  1、开启相机权限

（1） <uses-feature android:name=“android.hardware.camera” />
（2） <uses-feature android:name=“android.hardware.camera.autofocus” />

2、 开启闪光灯权限

<uses-permission android:name=“android.permission.FLASHLIGHT”/>

3、开启摄像头权限

<uses-permission android:name=“android.permission.CAMERA” />

在配置勾选框中，勾选相对应的权限配置