资源参考
概述
微信小程序原生上传图片功能封装,具体使用根据个人情况而定。
组件自定义属性与方法描述
- 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.detail
this.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 = this
let currPic = this.data.detailPics
currPic.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 = this
if (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, // 最多可以选择的图片张数,默认9
sizeType: ['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 = this
wx.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)//结果返回调用的页面
}
}
});
},
}
})