uni-app 从本地相册选择图片或使用相机拍照

终于弄懂这个选择图片的流程，删除了很多不需要的地方，最终得到的就是这个版本

页面部分

<view>上传图片  {{imageList.length}}/{{count}}</view>
<view class="uni-list list-pd"><view class="uni-uploader__files"><block v-for="(image,index) in imageList" :key="index"><view class="uni-uploader__file"><image class="uni-uploader__img" :src="data:image" :data-src="data:image" @tap="previewImage"></image></view></block><view class="uni-uploader__input-box"><view class="uni-uploader__input" @tap="chooseImage"></view></view></view>
</view>

script部分

export default {data() {return {imageList:[],count: 3,   //设置能上传的最大数量}},methods: {/* ---------------上传图片--------------- */chooseImage: async function() {const _self = thisif (_self.imageList.length === _self.count) {let isContinue = await _self.isFullImg();console.log("是否继续?", isContinue);if (!isContinue) {return;}}/* 选中图片 */uni.chooseImage({sourceType: ['camera', 'album'],sizeType: ['original', 'compressed'],count: _self.count,success: (res) => {const tempFilePaths = res.tempFilePaths; //获取到本地图片地址/* 上传图片 */const uploadTask = uni.uploadFile({url : 'http://*********',filePath: tempFilePaths[0],name: 'file',header:{'Authorization':  token},formData: {'user': 'test',},success: function (res) {let toJsonRes = JSON.parse(res.data) //获取到后台处理过的地址let list = []list.push( "http://*********"+toJsonRes.data)_self.imageList = _self.imageList.concat(list);}});}})},/* 图片数量满了弹出窗口询问是否清空 */isFullImg: function() {return new Promise((res) => {uni.showModal({content: "已经有"+this.count+"张图片了,是否清空现有图片？",success: (e) => {if (e.confirm) {this.imageList = [];} else {}},fail: () => {res(false)}})})},/* 预览图片 */previewImage: function(e) {let current = e.target.dataset.srcuni.previewImage({current: current,urls: this.imageList})},/* 删除图片 */delImage(e) {uni.showModal({title: '删除照片',content: '确定要删除这张照片吗？',cancelText: '取消',confirmText: '确定',success: res => {if (res.confirm) {this.imageList.splice(e.currentTarget.dataset.index, 1);}}})},

详细可查看官方文档
从本地相册选择图片或使用相机拍照

uni-app 从本地相册选择图片或使用相机拍照相关推荐

微信小程序：选择从本地相册选择图片或使用相机拍照
先弹出操作菜单,选择拍照还是从相册选择.根据用户选择进行相应操作.如图所示代码如下: browse:function(){let that = this;wx.showActionSheet({it ...
微信小程序chooseImage（从本地相册选择图片或使用相机拍照）
一.使用API wx.chooseImage(OBJECT) var util = require('../../utils/util.js') Page({data:{src:"../im ...
微信小程序-从相册获取图片,视频使用相机拍照,录像上传+服务器(nodejs版)接收
在本文微信小程序-从相册获取图片使用相机拍照本地图片上传之前需要看看微信小程序-获取用户session_key,openid,unionid - 后端为nodejs 代码封装是在上文添加的. ...
微信小程录制视频上传服务器,微信小程序-从相册获取图片,视频使用相机拍照,录像上传+服务器nodejs版接收-微信小程序视频上传功能-微信小程序视频上传...
在本文微信小程序-从相册获取图片使用相机拍照本地图片上传之前需要看看微信小程序-获取用户session_key,openid,unionid-后端为nodejs代码封装是在上文添加的.本文知识点:1. ...
uniapp 本地相册选择图片
标题 uniapp 本地相册选择图片 export default {data(){return {imageLists:[]}} }methods:{delete(index){ // 获取该数组的 ...
iOS打开照相机与本地相册选择图片
最近正好项目里面要集成"打开照相机与本地相册选择图片"的功能,今天就在这边给大家写一个演示程序:打开相机拍摄后或者在相册中选择一张照片,然后将它显示在界面上.好了废话不多说,因为比 ...
iOS 打开照相机与本地相册选择图片
最近正好项目里面要集成"打开照相机与本地相册选择图片"的功能,今天就在这边给大家写一个演示程序:打开相机拍摄后或者在相册中选择一张照片,然后将它显示在界面上.好了废话不多说,因为比 ...
Swift使用UIImagePickerController 从相册选择图片、从相机选择图片
配置: 如果是相机使用,需要在info.plist文件增加使用前应用程序说明:相机使用也是如此.(第二个是CALENDARS权限,打错了:图片是Photo Library Usage Descript ...
IOS研究院之打开照相机与本地相册选择图片
如下图所示在本地相册中选择一张图片后,我们将他拷贝至沙盒当中,在客户端中将它的缩略图放在按钮旁边,这个结构其实和新浪微薄中选择图片后的效果一样.最终点击发送将按钮将图片2进制图片上传服务器. 下面我 ...

uni-app 从本地相册选择图片或使用相机拍照

终于弄懂这个选择图片的流程，删除了很多不需要的地方，最终得到的就是这个版本

页面部分

script部分

uni-app 从本地相册选择图片或使用相机拍照相关推荐

最新文章

热门文章