uniapp拍照上传功能

落日映苍穹つ 2021-09-03 09:05 1280阅读 1赞

## 一、需求 ##

留言板需求，上传留言时，可拍照或者上传图片

## 二、调用拍照/上传文件功能 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbjI2MzM2NA_size_16_color_FFFFFF_t_70]  
点击拍照按钮，调取相机或者文件

data() { 
    	return { 
    		imageList:[],
    	}
    },
    ...
    onGetImgClick() { 
    	const that = this
    	uni.chooseImage({ 
    		count: 6, // 最多可以选择的图片张数，默认9
    		sizeType: ['original', 'compressed'], //original 原图，compressed 压缩图，默认二者都有
    		sourceType: ['album', 'camera'], //album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
    		success: function (res) { 
    			const len = that.imageList.length
    			if (len >= 6) {  
    				uni.showToast({ 
    					title: '图片最多上传6张'
    				})
    			} else { 
    				for (let i = 0; i < 6 - len; i++) { 
    					if (res.tempFilePaths[i]) that.imageList.push(res.tempFilePaths[i])
    				}
    			}
    		}
    	})
    }

## 三、展示 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbjI2MzM2NA_size_16_color_FFFFFF_t_70 1]

// 删除图片
    onDeleteClick(index) { 
    	this.imageList.splice(index, 1)
    },
    previewImage() { 
    	// 预览功能，相关博客有
    },
    onGetImgClick() { 
    	// 调用的同拍照按钮一样
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbjI2MzM2NA_size_16_color_FFFFFF_t_70]: /images/20210804/2181e7be675f4ea5942d69d2813009d0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbjI2MzM2NA_size_16_color_FFFFFF_t_70 1]: /images/20210804/e6e8755b618e492cb3742f2629ed9aa5.png