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, //图片质量,不填为80width: 340, //裁剪宽度height: 248, //裁剪高度},success: res => {//从相册或摄像头拿到图片临时路径及信息后进行判断//res.temFiles.size返回的单位为B 1KB=1024Bif (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>

uniapp选择图片裁剪,上传到服务器相关推荐

画世界上传图片提交到服务器_【MUI】选择图片并上传至服务器
最后更新17.01.20 一.首先这是HTML的代码将要显示一张图片二.然后这是JavaScript代码 var img_my = document.getElementById('my_img_ ...
uni-app实现图片的上传和裁剪
uni-app实现图片的上传和裁剪 uni-app 实现图片的上传和裁剪,插件市场上已经有作者提供了相关的插件.这里主要介绍下我在自己开发图片上传和裁剪过程中遇到的一些问题. 图片上传图片上传功能比 ...
【VUE】Toast-UI/Editor工具实现图片自定义上传到服务器
Toast-UI/Editor工具实现图片自定义上传到服务器 author: jwensh date: 2021.06.17 文章目录 Toast-UI/Editor工具实现图片自定义上传到服务器所 ...
微信小程序拍照视频上传php,微信小程序-拍照或选择图片并上传文件
微信小程序-拍照或选择图片并上传文件调用拍照API:https://mp.weixin.qq.com/debug/wxadoc/dev/api/media-picture.html?t=201612 ...
html5在线裁剪,HTML5 本地裁剪图片并上传至服务器（老梗）
很多情况下用户上传的图片都需要经过裁剪,比如头像啊什么的.但以前实现这类需求都很复杂,往往需要先把图片上传到服务器,然后返回给用户,让用户确定裁剪坐标,发送给服务器,服务器裁剪完再返回给用户,来回需要 ...
cocos creator 调用相机相册裁剪图片并上传到服务器
大致思路就是creator里面js调用Java和object-c代码,调起系统相机相册,选取图库图片/拍照图片进行裁剪,然后转化为base64字符串,最后通过http post请求上传到服务器. Ja ...
html5图片区域剪切,HTML5 本地裁剪图片并上传至服务器（老梗）
很多情况下用户上传的图片都需要经过裁剪,比如头像啊什么的.但以前实现这类需求都很复杂,往往需要先把图片上传到服务器,然后返回给用户,让用户确定裁剪坐标,发送给服务器,服务器裁剪完再返回给用户,来回需要 ...
uni-app开发微信小程序（获取多张本地相册图片并上传到服务器功能）
思路: 用户触发某一事件弹出一个弹窗(用户可能直接手机拍摄或者直接从手机相册选择照片),用户选择完方式后,调用对应的api并把选择好的照片上传到服务器. 涉及到的API: 1.uni.showActi ...
ipad html 自定义裁剪图片大小,移动端图片裁剪上传插件 Mavatar.js(原创)
插件描述:移动端头像上传,支撑头像预览和放大缩小平移,内置上传至后端请求方法. 注:请在移动端用手势查看缩放效果,PC端无法缩放 Mavatar 移动端头像上传,支撑头像预览和放大缩小平移,内置上传至 ...

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

uni.chooseImage(OBJECT)

uniapp选择图片裁剪,上传到服务器相关推荐

最新文章

热门文章