微信小程序原生上传图片封装

资源参考

组件免费下载地址

概述

微信小程序原生上传图片功能封装，具体使用根据个人情况而定。

组件自定义属性与方法描述

isShow：布尔值，默认为true true:不显示上传图标 false:显示上传图标
count：Number类型，上传图片张数，总计默认最多9张
showUrl: Array类型，组件绑定值（后台返回已上传图片数据）
uploadUrl: String类型，上传图片的后台接口
bindmyevent：function类型，自定义事件

适用场景

微信小程序原生组件
微信小程序授权校验之后，进行拍照
可以统计本次上传图片的失败次数
样式根据自己需要自行调整
图片可删除
图片可预览

使用方式介绍

// 父组件  js文件
Page({data: {formData: {imgUrl: []},countPic: 9, //上传图片最大数量showImgUrl: "", //路径拼接，一般上传返回的都是文件名，uploadImgUrl: '/wechatApp/fireEye/imageUpload'},//监听组件事件，返回的结果myEventListener: function (e) {let currLabel = `formData.imgUrl`let currArray = e.detailthis.setData({[currLabel]: currArray})}})

// 父组件 wxml
<view class="form-item">\<view class="item-label">隐患照片:</view><uploadImages style="flex:1" bindmyevent="myEventListener" count='{{countPic}}' showUrl="{{formData.imgUrl}}"  uploadUrl="{{uploadImgUrl}}"></uploadImages>
</view>

// 父组件 json 组件引入
{"usingComponents": {"uploadImages": "/pages/components/uploadImages",}
}

// 图片上传组件  js文件
// component/uploadImages/index.js
import ipConfig from '../../../utils/ipConfig'
Component({/*** 组件的属性列表*/properties: {count: { //最多选择图片的张数，默认9张type: Number,value: 9},uploadUrl: { //图片上传的服务器路径type: String,value: ''},isShow: {// 隐藏上传按钮type: Boolean},showUrl: { //上传图片对象type: Array,value: [],observer: function (newVal) {if (newVal == null) return;this.setData({detailPics:JSON.parse(JSON.stringify(newVal))})}}},/*** 组件的初始数据*/data: {detailPics: [], //上传的结果图片集合isTakePhoto: false,timer: null,isFault: 0, // 记录上传图片失败个数currRequestNum: 0, // 记录本次调用接口次数currSelectPicNum: 0,// 记录本次选择上传图片个数currUrl: [], //记录本次上传图片地址集合baseUrl:ipConfig.baseUrl},/*** 组件的方法列表*/methods: {// 删除图片deletePic(e){let that = thislet currPic = this.data.detailPicscurrPic.splice(e.currentTarget.dataset.index,1)that.setData({detailPics:currPic})that.triggerEvent('myevent', that.data.detailPics)//结果返回调用的页面},// 图片预览previewImage(e) {let array = []this.data.detailPics.forEach(item => {array.push(this.data.baseUrl+item)})wx.previewImage({current:array[e.currentTarget.dataset.id],urls: array,})},uploadDetailImage: function (e) { //这里是选取图片的方法var that = this;// 每次点击 重置本次选择上传图片个数、本次发起请求个数、本次上传图片故障数量that.setData({currSelectPicNum: 0,currRequestNum: 0,isFault: 0,currUrl:[]})//权限判断wx.getSetting({success(res) {if (!res.authSetting['scope.camera']) {wx.authorize({scope: 'scope.camera',success() {//直接打开摄像头if (!that.data.isTakePhoto) {that.getTakePhoto()}},fail(err) {wx.showModal({title: '提示',content: '摄像头开启失败!!!',cancelText: '退出',confirmText: '去开启',success(res) {if (res.confirm) {// 开启wx.openSetting()} else if (res.cancel) {wx.navigateBack({delta: -1,})}}})}})} else {// 直接打开摄像头if (!that.data.isTakePhoto) {that.getTakePhoto()}}}})},getTakePhoto() {let that = thisif (that.data.count == that.data.detailPics.length) {wx.showToast({title: '至多上传' + that.data.count + '张图片',mask: true,duration: 500,icon:'error'})return false}wx.chooseImage({count: that.data.count-that.data.detailPics.length, // 最多可以选择的图片张数，默认9sizeType: ['original', 'compressed'], // original 原图，compressed 压缩图，默认二者都有sourceType: ['album', 'camera'], // album 从相册选图，camera 使用相机，默认二者都有success: function (res) {var imgs = res?.tempFilePaths || [];that.setData({currSelectPicNum:imgs.length})wx.showLoading({title: '上传中...',mask: true,icon:'loading'})imgs?.forEach(item => {that.uploadimg({url: ipConfig.baseUrl + that.data.uploadUrl, //这里是你图片上传的接口path: item, //这里是选取的图片的地址数组header: {'content-type': 'application/x-www-form-urlencoded','wx-token': wx.getStorageSync('Swrh_token'),"openId": wx.getStorageSync('Swrh_key').openId}});})},})},//多张图片上传uploadimg: function (data) {var that = thiswx.uploadFile({url: data.url,filePath: data.path,name: 'file',header: data.header,formData: {},success: (resp) => {var picUrl = JSON.parse(resp?.data || '{}') //返回的结果，可能不同项目结果不一样if(picUrl.code===0){  //上传图片成功let currUrl = picUrl?.url || ''that.data.currUrl.push(currUrl)that.setData({currUrl:that.data.currUrl,currRequestNum:that.data.currRequestNum+1})}else{that.setData({isFault: this.data.isFault + 1,currRequestNum:that.data.currRequestNum+1})}},fail: (res) => {that.setData({isFault: this.data.isFault + 1,currRequestNum:that.data.currRequestNum+1})},complete: () => {if (that.data.currRequestNum === that.data.currSelectPicNum) {wx.hideLoading();if (that.data.isFault>0) {wx.showModal({title: '温馨提示',content: '检测到有' + that.data.isFault + '张图片上传失败，可能需要您重新上传',showCancel: false,confirmText:'我知道了'})}else{wx.showToast({title: '图片上传成功',mask:true,icon:'success'})}let currArray = that.data.currUrl.concat(that.data.detailPics)console.log(currArray)that.setData({detailPics:currArray})that.triggerEvent('myevent', that.data.detailPics)//结果返回调用的页面}}});},}
})

微信小程序原生上传图片封装相关推荐

【微信小程序原生】封装request
新建一个request类,对wx.request进行简单封装在request类里做了以下几件事: 在构造函数里创建默认请求的http header,可以在header里配制一些内容,在对应请求方法中 ...
微信小程序原生开发功能合集一：微信小程序开发介绍
一.专栏介绍本专栏主要内容为微信小程序常用功能开发过程的介绍说明,包括开发微信小程序常用组件的封装.常用功能的开发等,提供源代码.开发过程讲解视频.完整的课程等. 组件封装: 下拉选择组件. ...
uniapp开发——微信小程序获取上传图片的拍摄时间（附源码）
如果是单纯地使用uniapp做app或者h5开发,可以直接在上传的时候 uni.chooseImage 获取到图片的最后修改日期,那么可以使用其作为拍摄日期. 但是,一切的一切都源于微信小程序的接口封 ...
微信小程序原生开发记录
遇到类似 ref 交互的情况所需写法 // wxml<wux-calendar id="wux-calendar" /> // js Page({data: {}, ...
微信小程序上传图片到服务器总是失败_微信小程序怎么上传图片到服务器?
微信小程序怎么上传图片到服务器?相信很多人都会把小程序图片保存到本地吧,但是把图片上传到服务器就不一定了,下面一起随小编看看微信小程序怎么上传图片到服务器吧. 微信小程序怎么上传图片到服务器? 首先, ...
微信小程序原生接入腾讯云im（单聊，列表，聊天界面，自定义消息，自动回复）
微信小程序原生接入腾讯云im(单聊,列表,聊天界面,自定义消息,自动回复) 发送图片语音消息传送→ 文章目录 1.项目需求 2.参考文档 3.效果图 4.初始化集成SDK 5.登录 6.会话列表 7 ...
小程序promise封装post请求_微信小程序 es6-promise.js封装请求与处理异步进程
微信小程序 es6-promise.js封装请求与处理异步进程下载es6-promise.js置于根目录下的libs文件夹下: 在根目录utils文件夹下新建httpsPromisify.js,即定 ...
微信小程序canvas2d使用封装与案例使用
微信小程序canvas2d使用封装与案例使用,看一下这边封装效果 canvas2d文档:https://www.canvasapi.cn/ 下载地址:https://download.csdn.net ...
微信小程序定位权限封装
微信小程序定位权限封装 getUserOrSystemPermissions.js //如需动态获取权限,修改res.authSetting['scope.userLocation']与scope: ...

微信小程序原生上传图片封装

资源参考

概述

组件自定义属性与方法描述

适用场景

使用方式介绍

微信小程序原生上传图片封装相关推荐

最新文章

热门文章