uniapp实现拍照并上传base64格式的图片（记录一下~）

html结构

……
<uni-list><uni-list-item class="pro" title="图片" :showArrow="false"><button class="btnPic" type="primary" @click="getPic">拍 照</button></uni-list-item>
</uni-list><table class="pic"><tr><th colspan='3'>图片列表</th></tr><tr><th>序号</th><th>图片</th><th>操作</th></tr><tr v-for="(item, index) in picList" :key="index"><td>{{ index + 1 }}</td><td><image style="width: 100rpx; height:100rpx;" :src='item' mode=""></image></td><td><button class="delbtn" type="warn" size="mini" @click="deleteOneProduct(item, index)">删除</button></td></tr>
</table><button class="submit" type="primary" @click="sub">提交</button>
……

安装image-tools image-tools - DCloud 插件市场

根据安装的路径引入image-tools插件

import { pathToBase64, base64ToPath } from '@/js_sdk/mmmm-image-tools/index.js'

调用uni.chooseImage

getPic(){let that = this;uni.chooseImage({count: 9, // 最多可以选择的图片张数，默认9sizeType: ['original', 'compressed'], //original 原图，compressed 压缩图，默认二者都有sourceType: ['camera','album'], //album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项// success: function (res) {//如果只需要上传一张图片，则不需要循环//   // console.log(res);//  pathToBase64(res.tempFilePaths[0]).then(base64 => {//将图片转为base64//      console.log(base64)//       that.picArr.push({IMAGE_STREAM:base64})//   }).catch(error => {//           console.error(error)//      })// that.picList.push(res.tempFilePaths[0])// }success:(res) => { //上传多张图片//循环遍历res.tempFilePaths将每一个图像路径转换为base64for(let i=0;i<res.tempFilePaths.length;i++){pathToBase64(res.tempFilePaths[i]).then(base64 => {that.picArr.push({IMAGE_STREAM:base64})}).catch(error => {console.error(error)})that.picList.push(res.tempFilePaths[i])}}})
}

调用后端接口

sub(){uni.request({url: this.$apicore.apicore + '/API/Task/AddLLTestData',method: 'POST',header: {'content-type': 'application/json','token':this.token},data:{IMAGE_STREAMS_LIST:this.picArr},success:res=>{if(res.data.code == 200){uni.showToast({title: '上传成功！',icon: 'success',duration: 1500});this.picArr = [];this.picList = [];}else{uni.showModal({title: '上传失败！',content: res.data.msg,showCancel: false,success: res => {if (res.confirm) {// 点击确定之后的逻辑……}}});}}              })
},

uniapp实现拍照并上传base64格式的图片（记录一下~）相关推荐

vue实现PC端调用摄像头拍照人脸录入、移动端调用手机前置摄像头人脸录入、及图片旋转矫正、压缩上传base64格式/文件格式
PC端调用摄像头拍照上传base64格式到后台,这个没什么花里胡哨的骚操作,直接看代码 (canvas + video) <template><div><!--开启摄像头 ...
vue移动端页面调用手机拍照_vue实现PC端调用摄像头拍照、移动端调用手机前置摄像头人脸录入、及图片旋转矫正、压缩上传base64格式/文件格式...
export default { () { return {} }, methods: { # // 压缩图片 and 旋转角度纠正下方代码 # 需要自行去掉个人只作为着色效果加上 compres ...
织梦php版本图片不能上传,让dedecms织梦后台支持上传bmp格式的图片的教程
在后台-系统-附件设置,里面添加了bmp,上传bmp格式图片系统还是会提示你"文件类型不正确!",那么有什么好的解决方法呢,请看下文. 1.后台-系统-附件设置,添加bmp 2.i ...
android相册拍照剪切上传封装,安卓，图片裁剪上传真机测试好使，打包后显示：无法保存裁剪的图像...
var IMAGE_UNSPECIFIED = "image/*"; var PHOTOZOOM = 2; // 获取完图片返回key var PHOTOLAT = 1; // 剪 ...
前台传base64格式的图片,后台来接受处理.
1.首先你得知道前台传的是什么玩意. <body><input type="file" id="image"><br/>&l ...
base64格式的图片上传阿里云
base64格式的图片上传阿里云上传图片的时候,除了普通的图片上传,还有一张图片信息是以base64格式发送到后台的. 后台接受base64格式的图片,上传至阿里云代码:(主要是将base64转化成 ...
uni-app修改头像并上传头像资源到服务器
前端小白的uni-app艰难学习之路功能要实现从本地相册或拍照获取图片,然后传给后台,后台返回保存后的图片地址实现这里首先我们要了解,通过uni-app提供的chooseImage接口返回的是 ...
react签名+上传base64图片接口入参处理
好久没更博啦,最近写项目需要实现将签名生成的url(base64图片格式)上传到upload接口.在这简要的记录下-- 背景:1.实现签名功能: 2.上传base64图片(格式自定义) 实现:1.签名 ...
微信小程序-从相册获取图片,视频使用相机拍照,录像上传+服务器(nodejs版)接收
在本文微信小程序-从相册获取图片使用相机拍照本地图片上传之前需要看看微信小程序-获取用户session_key,openid,unionid - 后端为nodejs 代码封装是在上文添加的. ...

uniapp实现拍照并上传base64格式的图片（记录一下~）

uniapp实现拍照并上传base64格式的图片（记录一下~）相关推荐

最新文章

热门文章