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实现图片上传的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。