uniapp选择图片裁剪,上传到服务器

 

uni.chooseImage(OBJECT)

从本地相册选择图片或使用相机拍照。

App端如需要更丰富的相机拍照API（如直接调用前置摄像头），参考plus.camera(opens new window)

OBJECT 参数说明

参数名	类型	必填	说明	平台差异说明
count	Number	否	最多可以选择的图片张数，默认9	见下方说明
sizeType	Array<String>	否	original 原图，compressed 压缩图，默认二者都有	App、微信小程序、支付宝小程序、百度小程序
extension	Array<String>	否	根据文件拓展名过滤，每一项都不能是空字符串。默认不过滤。	H5(HBuilder X2.9.9+)
sourceType	Array<String>	否	album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
crop	Object	否	图像裁剪参数，设置后 sizeType 失效	App 3.1.19+
success	Function	是	成功则返回图片的本地文件路径列表 tempFilePaths
fail	Function	否	接口调用失败的回调函数	小程序、App
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

crop 参数说明

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

完整实例

<template>
	<view>
		<view @click="upLoadImage">
			点我选择图片或拍照
		</view>
	</view>
</template>

<script>
	export default {
		methods: {
			upLoadImage() {
				//uni.chooseImage:从本地相册选择图片或使用相机拍照。
				uni.chooseImage({
					count: 1,
					sizeType: ['original'],
					crop: {
						quality: 100, //图片质量,不填为80
						width: 340, //裁剪宽度
						height: 248, //裁剪高度
					},
					success: res => {
			 		//从相册或摄像头拿到图片临时路径及信息后进行判断
						//res.temFiles.size返回的单位为B 1KB=1024B
						if (res.tempFiles.size > 16 * 1024 * 1024) {
							uni.$u.toast(图片大小不能超过16M)
							return
						}
						//符合条件后使用uni.uploadFile api上传文件
						uni.uploadFile({
							url: '接口路径',
							filePath: res.tempFilePaths[0],
							//name:传后端需要的file类型参数
							name: 'multipartFiles',
							//formData可以传除file参数其他参数
							formData: {
								'token ': uni.getStorageSync('token'),
								'vehicleId': 118
							},
							success: (uploadFileRes) => {
								console.log(uploadFileRes.data);
							},
							fail: err => {
								console.log(err);
							}
						});
					}
				})
			}
		}
	}
</script>