使用微信授权上传照片
最编程
2024-01-26 09:05:13
...
html:
<div class="form-input sbox_c vue-uploader" v-if="type =='形象照'">
<label>形象照</label>
<section class="file-item" v-if="imgUrl2 ==''">
<div @click="chooseWXImage(2)" class="add">
<span>+</span>
</div>
</section>
<section class="file-item draggable-item" v-else>
<img :src="imgUrl2" alt="" id="previewImage" @click="previews(imgUrl2)"> <span v-show="isreadonly"
class="file-remove" @click="remove(2)">+</span>
</section>
<!-- <p v-if="imgUrl2 != ''">先删除再上传图片</p> -->
</div>
js
methods: {
// 点击调用微信
chooseWXImage: function (type) {
let _this = this;
wx.chooseImage({
count: 1, // 默认9
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
success: function (res) {
let localIds = res.localIds; // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片
// 判断 ios
if (window.__wxjs_is_wkwebview) {
for (var i = 0; i < localIds.length; i++) {
wx.getLocalImgData({
localId: localIds[i], // 图片的localID
success: function (res) {
let localData = res.localData; // localData是图片的base64数据,可以用img标签显示
}
});
}
} else {
// localIds.forEach((item, index) => {
// _this.imgLenght = false
// });
}
_this.wxuploadImage(localIds, type);
},
fail: function (res) {
mui.toast("失败");
}
});
},
// 上传图片到微信
wxuploadImage(localIds, type) {
var i = 0;
let _this = this;
var upload = function () {
let loacId = localIds[i];
if (window.__wxjs_is_wkwebview) {
if (loacId.indexOf("wxlocalresource") != -1) {
loacId = loacId.replace("wxlocalresource", "wxLocalResource");
}
}
wx.uploadImage({
localId: loacId, // 需要上传的图片的本地ID,由chooseImage接口获得
isShowProgressTips: 1, // 默认为1,显示进度提示
success: function (res) {
_this.serverId = res.serverId;
_this.getImgUrl(_this.serverId, type)
},
fail: function (error) {
mui.toast("失败");
}
});
}
upload();
},
//将serverId传到后台,返回图片路径
getImgUrl(id, type) {
var _self = this;
if(browserType =='qywx'){
var url='sys/cpWx/fileUpload'
}else{
var url='sys/wx/fileUpload'
}
$$.ajax({
method: "POST",
url: Utils.urls + url,
data: {
mediaIds: id,
},
success: function (rst) {
if (rst.code == 200) {
var t = rst.data;
if (type == 1) {
_self.imgUrl1 = t[0]
} else if (type == 2) {
_self.imgUrl2 = t[0]
} else if (type == 3) {
_self.imgUrl3 = t[0]
}
}else{
mui.toast(rst.message);
}
}
})
},
//删除图片
remove(type) {
var _self = this
if (type == 1) {
_self.imgUrl1 = ''
} else if (type == 2) {
_self.imgUrl2 = ''
} else if (type == 3) {
_self.imgUrl3 = ''
}
},
//预览图片
previews: function (url) {
wx.previewImage({
current: url, // 当前显示图片的http链接
urls: [url] // 需要预览的图片http链接列表
});
},
}
当然调用微信上传图片的前提是得到微信签名授权
$.post(Utils.prefixUrl_wx + "wxConfig", {"url": encodeURIComponent(window.location.href)},
function (r) {
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: r.data.param.appId, // 必填,公众号的唯一标识
timestamp: r.data.param.timestamp, // 必填,生成签名的时间戳
nonceStr: r.data.param.nonceStr, // 必填,生成签名的随机串
signature: r.data.param.signature, // 必填,签名
jsApiList: ['previewImage', 'chooseImage', 'uploadImage',
'downloadImage', 'getLocalImgData'
], // 必填,需要使用的JS接口列表
beta: true
});
wx.error(function (res) {
alert("出错了:" + res.errMsg); //这个地方的好处就是wx.config配置错误,会弹出窗口哪里错误,然后根据微信文档查询即可。
});
})
推荐阅读
-
使用企业微信开发自动发送验证码 企业微信短信验证
-
企业微信三方开发(五):扫码登录--一、登录授权配置
-
企业微信测试第三方应用获取临时授权码 auth_cde
-
如何在网站上进行企业微信扫码授权登录? 超详细教程
-
企业微信开发第三方应用的扫码授权登录
-
企业认证方面--使用微信公众号认证后显示已授权腾讯云运营公众号,这是否会影响公众号的运营?
-
uniapp 微信小程序开发误区日记:由于图表数据渲染不出来,第一次使用手表功能在项目中监听数据变化
-
[2023最新有效]油猴脚本自动填写问卷星正确答案,支持在需要微信验证的问卷上使用
-
微信翻译如何使用?如何在微信中进行中英互译
-
微信 "扫一扫 "物联网,全面揭秘 "扫一扫 "背后的扫盲技术!-1.1 扫一扫感知物体是做什么的? 1.1 微信扫一扫是做什么的? 扫一扫识物是指以图片或视频(商品图片:鞋/包/美妆/服饰/家电/玩具/图书/食品/珠宝/家具/其他商品)为输入媒介,挖掘微信内容生态中的有价值信息(电商+百科+资讯,如图1所示),并展示给用户。这里的电商基本涵盖了微信小程序覆盖上亿SKU的全量优质电商,可以支持用户货比N家并直接下单购买,百科和资讯则聚合了微信内的头部自媒体如搜狗、搜搜、百度等,向用户展示和分享拍摄商品相关的内容资讯。 图 1 扫一扫识别功能示意图 欢迎大家更新iOS新版微信→扫一扫→识货,亲自体验,也欢迎大家通过识货界面的反馈按钮向我们提交反馈意见。 扫一扫识物实景图展示 1.2 扫一扫识物有哪些使用场景? 扫一扫识物的目的是为用户访问微信内部生态内容开辟一个新窗口,以用户扫图片为输入形式,为用户提供微信生态内容中的百科、资讯、电商等作为展示页面。除了用户熟悉的扫一扫操作外,我们还将进一步拓展长按操作,让用户更方便地进行扫一扫操作。"扫一扫知事 "的落地场景主要涵盖三大部分: a. 科普知识: a.科普知识。用户通过扫一扫,可以在微信生态圈中获取该对象的百科、资讯等常识或趣闻,帮助用户更好地了解该对象; b.购物场景。同样的搜索功能支持用户看到喜欢的商品立即检索到微信小程序电商中的同款商品,支持用户即扫即购; c.广告场景。扫一扫识别物体可以辅助公众号文章、视频更好地理解其中蕴含的图片信息,从而更好地投放匹配广告,提高点击率。 1.3 Sweep Sense 为 Sweep 家族带来了哪些新技术? 对于扫一扫来说,大家耳熟能详的应该就是扫一扫二维码、扫一扫小程序码、扫一扫条形码、扫一扫翻译了。无论是各种形式的编码还是文字字符,都可以看作是图片的一种特定编码形式,而物的识别则是对自然场景图片的识别,这对于扫一扫家族来说是一个质的飞跃,我们希望从物的识别入手,进一步拓展扫一扫对自然场景图片的理解能力,比如扫酒、扫车、扫植物、扫人脸等服务,如下图3所示。 图 3 Sweep 家族