uni-app开发微信小程序（获取多张本地相册图片并上传到服务器功能）

思路：

用户触发某一事件弹出一个弹窗（用户可能直接手机拍摄或者直接从手机相册选择照片），用户选择完方式后，调用对应的api并把选择好的照片上传到服务器。

涉及到的API：

1、uni.showActionSheet 从底部向上弹出操作菜单

2、uni.chooseImage 从本地相册选择图片或使用相机拍照

3、uni.uploadFile 将本地资源上传到开发者服务器

实现代码：


uni.showActionSheet({itemList: ["拍照", "从手机相册选择"],success(res) {let sourceType = "camera";if (res.tapIndex == 0) {sourceType = "camera";} else if (res.tapIndex == 1) {sourceType = "album";}let that = this;uni.chooseImage({count: 6, //最多可以选择的图片张数，默认9sizeType: ["original", "compressed"],   //original 原图，compressed 压缩图，默认二者都有sourceType: [sourceType], //album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项success: function(res) {let tempFilePaths = res.tempFilePaths;//考虑到选择多张图片上传的情况for (let i = 0; i < tempFilePaths.length; i++) {uni.uploadFile({url:"xxx", //仅为示例，非真实的接口地址filePath: tempFilePaths[i],   //要上传文件资源的路径name: "file",  //文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容formData: {user: "test"},success: function(res) {var data = res.data; //do somethingdata = JSON.parse(data);},fail: function(err) {console.log(err);}});}}});}});

uni-app开发微信小程序（获取多张本地相册图片并上传到服务器功能）相关推荐

uni app 开发微信小程序及上线体验
uni app 开发微信小程序及上线体验项目创建及微信小程序AppId的申请本次开发的是电商类的微信小程序,这里用到的是HBuilderX这个编辑器.之前用的Visual Studio Code ...
记录uni.app开发微信小程序中地图的使用,以及项目中的解决办法
标题先讲一下需求:需要获取用户的地址信息以及经纬度,并在地图中展示时出来 uniapp官方也提供了api uni.getLocation(OBJECT) getLocation只能获取用户的经纬度,不 ...
微信提交表单到服务器,微信小程序页面表单如何跟图片一起上传服务器
拆开写. 表单提交是 wx.request 上传图片是 wx.uploadFile 你需要写一个通用图片上传接口,上传图片后台返回图片的url.这个通用接口在任何需要提交图片的表单都可以用到. 添加图 ...
微信小程序怎么绑定服务器,微信小程序页面表单如何跟图片一起上传服务器
拆开写. 表单提交是 wx.request 上传图片是 wx.uploadFile 你需要写一个通用图片上传接口,上传图片后台返回图片的url.这个通用接口在任何需要提交图片的表单都可以用到. 添加图 ...
基于腾讯云开发微信小程序（新闻发布及共享平台）上
基于腾讯云开发微信小程序(新闻发布及共享平台)上文章目录传统的微信小程序开发一.云开发是什么? 二.使用步骤 1.创建云环境 2.云数据库的创建 3.云储存 4.云函数总结传统的小程序开发 ...
一款社区论坛小程序源码（修复登录图片发布上传问题）
简介: 这是一款社区论坛小程序源码(修复登录图片发布上传问题) 内涵强大的功能支持多种多样的发帖模式比如发图文,发语音,发涂鸦,发视频等另外也可以设置为只能会员才可以发另外还拥有礼物功能,可以 ...
vant weapp 多选上传图片_微信小程序结合vant weapp ui实现多图上传组件
微信小程序多图上传最近在写小程序的商品上传,为方便需要使用多张图片的上传的功能.因为小程序不支持数组的多张图片同时上传,然后根据自己的需求创建了一个组件希望能够帮到大家效果图创建一个图片上传的p ...
uniapp开发——微信小程序获取上传图片的拍摄时间（附源码）
如果是单纯地使用uniapp做app或者h5开发,可以直接在上传的时候 uni.chooseImage 获取到图片的最后修改日期,那么可以使用其作为拍摄日期. 但是,一切的一切都源于微信小程序的接口封 ...
微信小程序获取当前版本（本地测试，线上测试版本，线上正式版本）
develop 开发版 trial 体验版 release正式版微信小程序自带功能,用于判断所处环境,然后调用不同的接口域名,一般用于自我封装请求的时候,或者使用第三方打包软件时,写在request ...

uni-app开发微信小程序（获取多张本地相册图片并上传到服务器功能）

思路：

涉及到的API：

实现代码：

uni-app开发微信小程序（获取多张本地相册图片并上传到服务器功能）相关推荐

最新文章

热门文章