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

最新推荐文章于 2025-05-23 09:25:17 发布

baitwoWN

最新推荐文章于 2025-05-23 09:25:17 发布

阅读量890

点赞数 1

CC 4.0 BY-SA版权

分类专栏：微信小程序文章标签：微信小程序小程序

本文链接：https://blog.youkuaiyun.com/weixin_45947191/article/details/128023197

微信小程序专栏收录该内容

6 篇文章

订阅专栏

该博客介绍了如何在微信小程序中封装一个图片上传组件，包括组件的属性、方法及使用场景。组件支持自定义上传图片数量、显示已上传图片、删除图片、预览图片等功能，并提供了详细的使用示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

资源参考

组件免费下载地址

概述

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

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

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)//结果返回调用的页面
          }
        }
      });
    },

  }
})