前端：微信公众号h5场景下实现上传图片

最新推荐文章于 2024-01-19 15:48:18 发布

回锅肉的神

最新推荐文章于 2024-01-19 15:48:18 发布

阅读量626

点赞数 1

分类专栏：微信文章标签：前端微信 javascript

本文链接：https://blog.csdn.net/ycitachi/article/details/130004905

版权

微信专栏收录该内容

1 篇文章 0 订阅

订阅专栏

效果

下载微信sdk

yarn add weixin-js-sdk

引入微信sdk

import wx from 'weixin-js-sdk' // 引入微信js-sdk

html部分

        <div v-if="!localData" @click="chooseImg">
          <van-uploader :readonly="true" />
        </div>
        <div class="img-box" v-else @click="showPreImg = true">
           <!-- 这是图片右上角的关闭按钮 -->
          <span @click.stop="localData = ''">
            <van-icon class="close-icon" size="15px" name="cross" />
          </span>
          <img style="width: 100%; height: 100%; vertical-align: middle" :src="localData" />
        </div>
        <!-- 预览大图 -->
        <van-popup v-model="showPreImg" closeable round>
          <img style="width: 100%; height: 100%; vertical-align: middle" :src="localData" />
        </van-popup>

js部分

<script>
import wx from 'weixin-js-sdk'
export default{
    data(){
        return {
            localIds: [], //图片列表数组
            localData: '',
            showPreImg: false, //预览图片弹窗
   }
 },
methods:{
     getSignature() {
      // 微信获取签名
      return new Promise((resolve, reject) => {
        let data = { url: window.location.href.split('#')[0] }
        getSignature(data).then(res => {
          let data = res.obj
          wx.config({
            appId: data.appid, // 必填，公众号的唯一标识
            timestamp: data.timestamp, // 必填，生成签名的时间戳
            nonceStr: data.noncestr, // 必填，生成签名的随机串
            signature: data.signature, // 必填，签名，见附录1
            jsApiList: ['chooseImage', 'getLocalImgData'] // 必填，openLocation
          })
          wx.ready(function (res) {
            resolve(res)
          })
          wx.error(function (res) {
            console.log('微信报错', res['errMsg'])
            resolve(res)
          })
        })
      })
    },
    chooseImg() {
      let _this = this
      wx.chooseImage({
        count: 1, // 默认9
        sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
        success: function (res) {
          console.log('选择图片返回', res)
          _this.localIds = res.localIds
          wx.getLocalImgData({
            localId: res.localIds[0],
            success: function (ress) {
              let bs64 = ress.localData // localData是图片的base64数据，可以用 img 标签显示
              if (bs64.indexOf('data:image') != 0) {
                //判断是否有这样的头部，没有就加上
                bs64 = 'data:image/jpeg;base64,' + bs64
              }
              _this.localData = bs64.replace(/\r|\n/g, '').replace('data:image/jgp', 'data:image/jpeg')
              
            }
          })
        }
      })
    }
    }
}

</script>

参考文档：微信网页开发