Vue中使用微信JSDK实现图片上传

1.npm安装，不会的看这里

npm install weixin-js-sdk

2.main.js全局注册

import wx from 'weixin-js-sdk' Vue.prototype.$wx = wx

3.页面代码

<div class="uploader"><div class="col"><div class="upload already" v-for="(item,index) in file_list" :key="index"><img class="meImg" :src="item" alt=""><img class="delete" @click="deleteSkin(index)" src="https://sucai.suoluomei.cn/sucai_zs/images/20201021113620-4.png" alt=""></div><div class="upload" @click="getupload" v-if="file_list.length < 6"><img class="meImg" src="https://sucai.suoluomei.cn/sucai_zs/images/20201021111149-3.png" alt=""></div></div> </div> .uploader {width: 100%;height: 220px;overflow: hidden;.col {margin-top: 10px;display: flex;flex-direction: row;align-items: center;flex-flow: row wrap;.upload {position: relative;margin: 5px 10px 0 0;display: inline-block;.meImg {width: 95px;height: 95px;overflow: hidden;object-fit: cover;}.delete {position: absolute;right: 0;top: 0;width: 20px;}}}} wx.config({debug: false,appId: 'appId',timestamp: 'timestamp',nonceStr: 'nonceStr',signature: 'signature',jsApiList: ['chooseImage', 'getLocalImgData']});

引入上传时图片压缩，压缩的js请点击这篇文章查看

import { imgPreview } from '@/utils/imgPreview.js' deleteSkin(index) {this.file_list.splice(index, 1)},getupload() {this.$wx.ready(() => {this.$wx.chooseImage({count: 6,sizeType: ['original', 'compressed'],sourceType: ['album', 'camera'],success: (res) => {this.getpublish(res.localIds, 0)}});})},getpublish(list, i) {this.$wx.getLocalImgData({localId: list[i],success: (res) => {var localData = res.localData//将base64转换为bloblet base = atob(localData.substring(localData.indexOf(',') + 1));let length = base.length;let url = new Uint8Array(length);while (length--) {url[length] = base.charCodeAt(length);}let file = new File([url], 'a.jpg', {type: 'image/jpg'})var formData = new FormData();imgPreview(file, async files => {formData.append("file", files);formData.append('key', 'Gn1xVdBiTClSSHKZifg0pTQSU5XGagWO')axios({method: "post",url: process.env.VUE_APP_SUCAI_API,data: formData}).then((res) => {//采用递归上传if (res.data.status == 200) {this.file_list.push(res.data.info.url)if (i + 1 == list.length) {console.log('上传成功')}if (++i < list.length) {this.getpublish(list, i);}} else {alert('上传失败')}})})}});},

总结

以上是生活随笔为你收集整理的Vue中使用微信JSDK实现图片上传的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。