vue, vux调用微信点击图片,上传图片,删除图片,接口,其中选图接口,苹果手机显示有问题,查看不到图片,提交会提示fail not exist,解决如下
- <template>
<div v-cloak v-show="show">
<div v-show="mailbox">
<div class="deanMailbox" >
<div class="deanMailDiv">
<div>
<ul class="uplodeUl">
<li v-for="(item,index) in images" class="uplodeLi">
<img :src="item.imgSrc" class="uplodeImg"/>
<div @click='remove_img(index)' class="imgA"></div>
</li>
<li>
<div class="uplodeDean" v-if="images.length != 10" @click="chooseImg">
<img src="../assets/img/uolode.png" width="100%" height="100%"/>
</div>
<span class="uplodeTxt font16" v-if="images.length<2">上传问题照片</span>
</li>
</ul>
</div>
</div>
</div>
<div class="squadButton agencyBut" v-on:click="submit">提交</div>
</div>
</div>
</div>
</div>
</template>
<script>
let $ = require('Jquery')
export default {
name: 'sommoProblem',
data () {
return {
show: false,
feedback: [{
cat_list: []
}],
sommoProblem: true,
mailbox: false,
feedbacks: false,
feed_index: 0,
sommoProblemOne: true,
sommoProblemTwo: false,
sommeoIndex: 0,
back: [],
selectShows: true,
myback: [],
selectProblem: '',
textAreaProblem: '',
images: [],
imageArray: [],
myFeedBackOnClick: false,
infoList: {},
styleObject: {
width: '',
height: ''
},
avatar: '',
userNames: '',
img: [],
style: {
width: ''
}
}
},
methods: {
verify: function () {
let thisObj = this
this.$chaos.setTitle('帮助与反馈')
this.$chaos.verify(function () {
thisObj.$chaos.ajax({ //需要调用微信jdk接口,后台已经打包好了,前端直接调用的接口,想要在vux中使用微信jdk必须在引用vux给的东西,这个可以在 https://vux.li/#/?id=%E4%BD%BF%E7%94%A8%E5%BE%AE%E4%BF%A1-jssdk 网站中看到
data: {
url: location.href.split('#')[0]
},
slient: true,
userinfo: true,
url: 'Weixin/get_jssdk_config',
callback: function (type, res) {
if (type !== 'success') {
return
}
if (res.status) {
thisObj.$wechat.config(res.info)
}
}
})
})
},
getLocalImgData: function (localIds) {
let localId = localIds.pop()
let thisObj = this
thisObj.$wechat.getLocalImgData({ //vux中把wx换成 thisObj.$wechat
- localId: localId,
success: function (res) {
let localData = res.localData
thisObj.images.push({imgSrc: localData, localId: localId})
if (localIds.length > 0) {
thisObj.getLocalImgData(localIds)
}
},
fail: function () {
thisObj.$vux.toast.show({
text: '图片有误',
type: 'text',
width: '180px',
position: 'bottom'
})
}
})
},
chooseImg: function () {
let thisObj = this
thisObj.$wechat.chooseImage({
count: 9, // 默认9
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success: function (res) {
let localIds = res.localIds
if (window.__wxjs_is_wkwebview) { //判断是否是WKWebview内核,也就是苹果内核
thisObj.getLocalImgData(localIds)
} else {
for (let i = 0; i < localIds.length; i++) {
thisObj.images.push({imgSrc: localIds[i], localId: localIds[i]})
}
}
setTimeout(function () {
$('.uplodeImg').each(function () {
if ($(this).height() > $(this).width()) {
$(this).css({'width': '100%', 'height': 'auto'})
} else {
$(this).css({'width': 'auto', 'height': '100%'})
}
})
}, 600)
}
})
},
remove_img: function (index) {
let thisObj = this
thisObj.$vux.confirm.show({
title: '系统提示',
content: '确认要删除吗?',
onConfirm () {
thisObj.images.splice(index, 1)
}
})
},
submit: function () {
let thisObj = this
thisObj.imageArray = []
thisObj.wx_upload_img(thisObj.images.length)
},
wx_upload_img: function (index) {
let thisObj = this
if (index === 0) {
if (thisObj.images.length >= 9) {
thisObj.$vux.toast.show({
text: '图片最多上传9张',
type: 'text',
width: '180px',
position: 'bottom'
})
return
}
thisObj.$vux.confirm.show({
title: '系统提醒',
content: '确认要提交吗?',
onConfirm () {
thisObj.$vux.loading.show({
text: 'Loading'
})
thisObj.$chaos.ajax({
data: {
file: thisObj.imageArray
},
slient: true,
userinfo: true,
url: 'User/user_leave_msg',
callback: function (type, res) {
if (type !== 'success') {
return
}
if (res.status) {
thisObj.$vux.loading.hide()
} else {
thisObj.$vux.toast.show({
text: res.msg,
type: 'text',
width: '180px',
position: 'bottom'
})
}
}
})
}
})
return
}
let thisSrc = thisObj.images[index - 1]['localId']
thisObj.$wechat.uploadImage({
localId: thisSrc, // 需要上传的图片的本地ID,由chooseImage接口获得
isShowProgressTips: 0, // 默认为1,显示进度提示
success: function (res) {
let serverId = res.serverId // 返回图片的服务器端ID
thisObj.imageArray.push(serverId)
thisObj.wx_upload_img(index - 1)
}
})
}
},
created: function () {
this.verify()
},
watch: {
'$route': 'verify'
}
}
</script>
<style scoped>
.divmyFeed{
margin-bottom:30px;
}
#feedUl li{
float: left;
margin-right: 5px;
overflow: hidden;
margin-bottom: 5px;
}
#feedUl li:nth-child(3n){
margin-right: 0px;
}
#feedUl:after{
content: '';
display: block;
clear: both;
}
#feedUl{
margin-top: 10px;
}
[v-cloak] {
display: none;
}
.noMessageColor{
color: #bbb;
margin-bottom: 10px;
}
.messageImg{
text-align: center;
margin-top: 180px;
}
.myFeedOn {
margin: 10px 30px 10px 38px;
background: #FFFFFF;
box-shadow: 0 1px 5px #ccc;
/*padding:10px 15px;*/
}
.myFeedTitle {
padding: 15px 20px;
position: relative;
}
.feedCon {
padding-bottom: 10px;
border-bottom: 1px solid #bebebe;
}
.feedQues{
padding: 8px 0px;
word-break: break-all;
text-align: justify;
}
.feedTitle {
padding: 14px 0px 14px 32px;
overflow: hidden;
}
.boderB {
border-bottom: 1px solid #dfdfdf;
border-top: 1px solid #dfdfdf;
}
.feedP2 {
color: #393939;
font-size:16px;
line-height: 1.9;
text-align: justify;
}
.feedP1 {
font-size: 14px;
color: #6c6c6c;
line-height: 1.5;
}
.feedImage{
position: absolute;
left: -24px;
top: 22px;
width: 60px;
height: 60px;
border-radius: 50%;
overflow: hidden;
}
.feedBottom {
padding: 30px 0px 6px;
margin-bottom: 20px;
}
.feedBottomYellow {
font-size: 14px;
text-align: center;
line-height: 1.3;
color: #ffa200;
}
.feedBottomP {
font-size: 14px;
text-align: center;
line-height: 3;
color: #bababa;
}
.imgA{
position: absolute;
top:0px;
right:0px;
width: 20px;
height:20px;
background-size: 100% 100%;
background-image: url(../assets/img/del.png);
}
.uplodeLi{
width: 22%;
float: left;
margin-right: 4%;
overflow: hidden;
box-sizing: border-box;
height: 73px;
margin-bottom: 7px;
position: relative;
}
.uplodeLi:nth-child(4n){
margin-right: 0%;
}
.fileInput{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
opacity: 0;
}
.selectDiv{
position: relative;
}
.placeProble{
position: absolute;
left: -47px;
top: 10px;
background: transparent;
z-index: -8;
}
.selectDiv{
display: inline-block;
}
.sommoProblemTxt li {
border-bottom: 1px solid #e2e2e2;
}
.uplodeUl:after{
content: '';
display: block;
clear: both;
}
.sommoProblemTxtP {
margin: 0 30px;
background: url(../assets/img/circle.png) no-repeat;
text-indent: 20px;
background-size: 2.5%;
background-position: 0 6px;
}
.personalUl a, .opinionA a {
color: #363636;
}
.sommoProblemHead {
border-bottom: 1px solid #fbac36;
padding: 4px 0;
}
.sommoProblemHead li {
width: 33.333%;
float: left;
text-align: center;
line-height: 2.5;
position: relative;
}
.opinionA li {
padding: 20px 30px;
}
.sommoProblemBor:after {
content: '';
display: block;
width: 45%;
margin: 0 auto;
height: 2px;
background: #fbac36;
}
.sommoProblemHead li {
width: 33.333%;
float: left;
text-align: center;
line-height: 2.5;
position: relative;
}
.sommoProblemHead li {
width: 33.333%;
float: left;
text-align: center;
line-height: 2.5;
position: relative;
}
.sommoProblemHead ul:after {
content: '';
display: block;
clear: both;
}
.deanMailbox {
border-bottom: 1px solid #e2e2e2;
}
.deanMailSel {
width: 100%;
text-align: center;
border-bottom: 1px solid #e2e2e2;
}
.deanMailboxSelect {
-webkit-appearance: none;
background: transparent;
border: 0;
font-size: 16px;
line-height: 2.8;
z-index: 999;
width: 100%;
padding-right: 20px;
height: 45px;
width: 90px;
outline: none;
}
.placeProble{
width: 120px;
}
.deanMailboxSelect:active{
background: transparent;
}
.deanMailboxI {
width: 11px;
height: 8px;
background-image: url(../assets/img/xiala.png);
font-weight:bold;">#FFFFFF;
background-size: 100% 100%;
display: inline-block;
position: absolute;
top: 20px;
right: 0;
}
.deanMailDiv {
margin: 15px 20px;
}
.deanMailboxTextarea {
resize: none;
width: 100%;
border: 0;
font-size: 16px;
}
.uplodeDean {
width: 22%;
height: 73px;
display: inline-block;
position: relative;
}
.uplodeTxt {
padding: 0px 10px;
}
.font16 {
font-size: 16px;
}
.myFeedback {
margin: 0 20px;
}
.myFeedback li {
background: #f6f6f6;
padding: 20px 20px 11px;
margin: 20px 0;
box-shadow: 0 1px 4px #ccc;
}
.myFeedbackDiv {
margin-bottom: 5px;
}
.fl {
float: left;
}
.myFeed {
margin-left: 70px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
word-break: break-all;
}
.shz {
color: #d30012;
}
.myFeedXz {
width: 30px;
height: 12px;
margin: 16px auto 0;
background: url(../assets/img/xiala.png) no-repeat;
background-size: 65%;
background-position: center center;
}
</style>
vue, vux调用微信点击图片,上传图片,删除图片,接口,其中选图接口,苹果手机显示有问题,查看不到图片,提交会提示fail not exist,解决如下的更多相关文章
- JSSDK调用微信原生的功能上传图片保存到自己的服务器中
第一件事首先是微信的选择图片功能,就是微信发朋友圈选择图片的时候那个界面 //调用微信拍照功能 wx.chooseImage({ count: 1, // 默认9 sizeType: ['origin ...
- 调用微信JS-SDK接口上传图片
最近要在微信上做个问卷调查,有个上传图片功能,折腾找了半天资料,都不好弄,最终打算调用微信提供的上传图片接口,实现上传图片功能!此功能最大的好处是可以在微信服务器上暂存图片,减少本地服务器图片的缓存, ...
- PHP调用微信wx_JSSDK录音并播放,
<?php require_once "jssdk.php"; $jssdk = new JSSDK("wx7a862ec806328ca2", &quo ...
- php实现调用微信上传照片然后保存至服务器与数据库
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> <s ...
- (干货)微信小程序之上传图片和图片预览
这几天一直负责做微信小程序这一块,也可以说是边做边学习吧,把自己做的微信小程序的一些功能分享出来,与大家探讨一下,相互学习相互进步. 先看下效果图 只写了一下效果样式的话希望大家不要太在意,下面马路杀 ...
- 微信小程序之上传图片和图片预览
这几天一直负责做微信小程序这一块,也可以说是边做边学习吧,把自己做的微信小程序的一些功能分享出来,与大家探讨一下,相互学习相互进步. 先看下效果图 只写了一下效果样式的话希望大家不要太在意,下面马路杀 ...
- 第三方网站不能调用微信公众平台里的图片了 显示"此图片来自微信公众号平台未经允许不可引用"
下午ytkah在自己小博客搜索时看到有几篇文章图片显示不了,再访问一些网站时发现有些图片无法显示出来,显示"此图片来自微信公众号平台未经允许不可引用",如下图所示,这个应该是最近微 ...
- thinkPHP5.0框架验证码调用及点击图片刷新简单实现方法
这篇文章主要介绍了thinkPHP5.0框架验证码调用及点击图片刷新简单实现方法,结合简单示例形式分析了thinkPHP5框架验证码相关配置.后台验证.前台刷新等操作技巧,学习thinkphp源码的朋 ...
- JAVA调用微信接口实现页面分享功能(分享到朋友圈显示图片,分享给朋友)
钉钉提供的内网穿透之HTTP穿透:https://www.cnblogs.com/pxblog/p/13862376.html 网页分享到微信中如何显示标题图,如果自定义标题图,描述,显示效果如下 官 ...
随机推荐
- MySQL 命令操作数据表
MySQL 命令操作数据表 1.查看表信息 desc hs_user_credit_info; 2.新增表字段 alter table hs_credit_order add search_relat ...
- HDU 6406 Taotao Picks Apples & FJUT3592 做完其他题后才能做的题(线段树)题解
题意(FJUT翻译HDU): 钱陶陶家门前有一棵苹果树. 秋天来了,树上的n个苹果成熟了,淘淘会去采摘这些苹果. 到园子里摘苹果时,淘淘将这些苹果从第一个苹果扫到最后一个. 如果当前的苹果是第一个苹果 ...
- 几个优化SQL查询的方法
1.什么是执行计划 执行计划是数据库根据SQL语句和相关表的统计信息作出的一个查询方案,这个方案是由查询优化器自动分析产生的,比如一条SQL语句如果用来从一个 10万条记录的表中查1条记录,那查询优化 ...
- spring配置redis
<?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.spr ...
- pitch, yaw, roll
在航空中,pitch, yaw, roll下图所示. pitch是围绕X轴旋转,也叫做俯仰角. yaw是围绕Y轴旋转,也叫偏航角. roll是围绕Z轴旋转,也叫翻滚角.
- DAG最小路径点覆盖
Problem 给出一个有向无环图 (\(DAG\)),求出最少使用其中多少条互不相交的路径覆盖所有点. Solution 若有 \(n\) 个点,对于每个点 \(i\) ,我们将它拆成两个点 \(i ...
- HDU 4859 海岸线(最小割+最大独立点权变形)
http://acm.hdu.edu.cn/showproblem.php?pid=4859 题意: 欢迎来到珠海!由于土地资源越来越紧张,使得许多海滨城市都只能依靠填海来扩展市区以求发展.作为Z市的 ...
- Newtonsoft.Json 去掉\r\n
itemKindList.ToString(Newtonsoft.Json.Formatting.None)
- 【Ruby】【高级编程】正则
#[[正则]]=beginsub 和 gsub 及它们的替代变量 sub! 和 gsub! 是使用正则表达式时重要的字符串方法.所有这些方法都是使用正则表达式模式执行搜索与替换操作.sub 和 sub ...
- 【Java】【存储&作用域】
[存储] 1. 寄存器.这是最快的保存群裕,因为它位于和其他所有保存方式不同的地方:处理器内部.然而,寄存器的数量有限,所以寄存器是根据需要由编译器分配.我们对此没有直接的控制权,也不可能在自己的程序 ...