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实现图片上传相关推荐

Vue中使用vue-croper插件实现图片上传裁剪并传到SpringBoot后台接口
场景前后端分离的项目,前端修改头像时,需要对头像进行裁剪并且能实时预览,然后上传到SpringBoot后台. 实现效果如下注: 博客: https://blog.csdn.net/badao_li ...
微信开发h5图片上传（拍照、图片压缩、IOS照片旋转)
微信开发h5图片上传开发环境 vue.js,原生h5 input file, 微信公众号网页依赖安装 exif-js:IOS下拍照照片的方向有问题, 需要exif-js来读取照片信息进行旋转处理: ...
微信小程序图片上传九宫格拖拽组件
微信小程序图片上传&九宫格拖拽组件前言图片上传加九宫格拖拽是一个比较常用的组件,常用于发帖或者评论等内容上传模块,我这篇九宫格拖拽的思路是借鉴了一款优雅的小程序拖拽排序组件实现这篇文章实 ...
**微信小程序图片上传+后台PHP修改图片名称**
微信小程序图片上传+后台PHP修改图片名称前端代码:比较随意 <view class="weui-uploader"><view class="img ...
微信JSSDK多图片上传并且解决IOS系统上传一直加载的问题
微信JSSDK多图片上传并且解决IOS系统上传一直加载的问题参考文章: (1)微信JSSDK多图片上传并且解决IOS系统上传一直加载的问题 (2)https://www.cnblogs.com/co ...
微信小程序图片上传（文字识别）
要点:OCR文字识别图片上传在最近的项目中遇到需要进行OCR识别,中间遇到的坑记录一下 OCR接口:采用百度OCR通用文字识别在进行调试过程中遇到下列问题: 百度ocr接口1.对图片经行base ...
微信小程序图片上传与内容安全审核
文章目录原由内容审核种类小程序云开发图片检测创建云函数编写图片检测代码小程序图片处理图片上传图片压缩云函数安全检测接入文本检测最后的坑原由之前有开发一个微信小程序,拥有图片 ...
uniApp 生成微信小程序图片上传提示 fail url not in domain list 的解决方法
问题表现: uniApp 生成微信小程序,获取内容程序不报错,但是图片上传提示 fail url not in domain list 错误. 问题分析: 微信小程序:服务器域名配置每个微信小程序需 ...
Vue Element UI 之富文本图片上传服务器 + 图片地址插入富文本
该案例的情况 vue版本:vue cli3 插件:vue-quill-editor vue-quill-editor的增强模块:quill-image-extend-module quill-imag ...

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

Vue中使用微信JSDK实现图片上传相关推荐

最新文章

热门文章