微信小程序实现图片上传功能

微信小程序实现图片上传和视频上传功能

服务器：阿里云
后端：PHP，提供上传接口

用到相关API：
wx.showActionSheet：显示操作菜单

wx.chooseImage：从本地相册选择图片或使用相机拍照，该api后期官方不维护，可使用 wx.chooseMedia api

wx.chooseVideo：拍摄视频或从手机相册中选视频

wx.chooseMedia：拍摄或从手机相册中选择图片或视频，官方提示：此接口不再更新，建议使用 wx.chooseMedia

选择需要上传的文件：

//可以选择视频或者图片uploadFiles(){var _this = this;wx.showActionSheet({itemList: ['选择图片', '选择视频'],success: function (res) {let xindex = res.tapIndex;if (xindex == 0){// 选择图片_this.chooseImage()} else if (xindex == 1){// 选择视频_this.chooseVideo()}},fail: function (res) {console.log(res.errMsg)}})},

选择图片或拍照

//  选择图片类型chooseImage(){wx.chooseImage({count: 1,//上传数量sizeType: ['original', 'compressed'],//图片:原图和压缩sourceType: ['album', 'camera'], // 选择图片的来源success: (res) => {let arr = res.tempFiles;var imgInfo = {};arr.map(function(v,i){v['progress'] = 0;imgInfo=v})_this.upImgs(imgInfo,'image')}})},

选择视频或拍摄

chooseVideo(){let _this=thiswx.chooseVideo({count: 1,//上传数量maxDuration:"30",//拍摄时长sizeType: ['original', 'compressed'],//图片:原图和压缩sourceType: ['album', 'camera'], // 选择图片的来源// sourceType:"album",compressed:true,camera: 'back',success: (res) => {let videoInfo = {};videoInfo['tempFilePath'] = res.tempFilePath;//路径videoInfo['size'] = res.size;// 大小videoInfo['height'] = res.height;videoInfo['width'] = res.width;videoInfo['thumbTempFilePath'] = res.thumbTempFilePath;//封面videoInfo['progress'] = 0;_this.upImgs(videoInfo,'video')}})},

上传服务器

 upImgs(dataInfo, type) {let that=thiswx.showLoading({title: '上传中',mask:true,})wx.uploadFile({url: '上传的网络地址',filePath: type=='video'?dataInfo.tempFilePath:dataInfo.path,formData:null,name: 'file',header: {'content-type': 'multipart/form-data'},success:(res=>{wx.hideLoading()//判断上传的是图片还是视频if(type=="video"){that.setData({console.log('视频地址：'+data.data.src)console.log('视频封面：'+data.data.src+'?spm=qipa250&x-oss-process=video/snapshot,t_1000,f_jpg,w_800,h_400,m_fast')}else{console.log('图片地址：'+ data.data.src)}})})},

微信小程序实现图片上传功能相关推荐

php微信小程序多图上传,tp5实现微信小程序多图片上传到服务器功能
最近在做一个教育类的小商城的微信小程序,用到了上传多个图片文件到服务器端,这里做一个讲解,希望对大家有所帮助. 1,小程序端: 在wxml文件中: 删除点击上传作业在js文件中: Page({ / ...
uniapp 微信小程序开发图片上传压缩
uniapp 微信小程序开发图片上传压缩安卓上传图片并压缩思路全部代码安卓上传图片并压缩由于后端接口对图片的大小有限制,所以在上传图片是需要压缩处理: uni.chooseImage({c ...
微信小程序多图片上传支持预览删除设置数量上限
github地址: https://github.com/Volcano-Yang/miniprogram-picture-upload Miniprogram-Picture-Upload 努力帮助 ...
【微信小程序】图片上传组件“mp-uploader“(weui)
使用示例 wxml <mp-uploader files="{{files}}" max-count="{{maximgs}}" max-size=& ...
微信小程序删除服务器图片,微信小程序实现图片上传放大预览删除代码
本文实例为大家分享了微信小程序图片上传放大预览的具体代码,供大家参考,具体内容如下 image.js代码: = 9) { this.setData({ lenMore: 1 }); setTimeou ...
微信小程序多图片上传全栈实战
本篇教程技术栈:springBoot(Java后端)+ 微信小程序.完整的图片上传教程. 页面截图,点击图片右上角按钮可以删除图片. 1.图片上传需要使用wx.uploadFile(Object o ...
微信小程序之图片上传、多图上传、头像上传、头像获取、图片上传失败问题解决
小程序用户授权获取用户头像,需点击才可以让用户选择是否授权. 图片上传失败问题解决图片上传一定要记得修改合法域名,不然会失败,而且找不到报错信息哟!并且域名采用 https 点击,用户授权,获取用 ...
微信小程序实现图片上传（清晰版）
在wxml文件中添加一个按钮和一个image标签用于显示上传的图片 <view><button bindtap="chooseImage">选择图片< ...
微信小程序自定义图片上传组件
实现功能: 点击上传按钮可上传图片,并且可定义最多可上传的图片数量.限制图片的大小.类型和来源. 点击图片可预览图片. 点击删除按钮可删除图片. <!-- image-upload.wxml - ...
微信小程序之图片上传之巨坑
写这个随笔的目的是想让遇到这个坑的人少点时间去填坑先附上小程序前端和java端代码 startUpload: function(){ wx.chooseImage({ success: functi ...

微信小程序实现图片上传功能

微信小程序实现图片上传和视频上传功能

微信小程序实现图片上传功能相关推荐

最新文章

热门文章