uniapp选择图片裁剪,上传到服务器
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>
更多推荐
已为社区贡献7条内容
所有评论(0)