<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,解决如下的更多相关文章

  1. JSSDK调用微信原生的功能上传图片保存到自己的服务器中

    第一件事首先是微信的选择图片功能,就是微信发朋友圈选择图片的时候那个界面 //调用微信拍照功能 wx.chooseImage({ count: 1, // 默认9 sizeType: ['origin ...

  2. 调用微信JS-SDK接口上传图片

    最近要在微信上做个问卷调查,有个上传图片功能,折腾找了半天资料,都不好弄,最终打算调用微信提供的上传图片接口,实现上传图片功能!此功能最大的好处是可以在微信服务器上暂存图片,减少本地服务器图片的缓存, ...

  3. PHP调用微信wx_JSSDK录音并播放,

    <?php require_once "jssdk.php"; $jssdk = new JSSDK("wx7a862ec806328ca2", &quo ...

  4. php实现调用微信上传照片然后保存至服务器与数据库

    <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>    <s ...

  5. (干货)微信小程序之上传图片和图片预览

    这几天一直负责做微信小程序这一块,也可以说是边做边学习吧,把自己做的微信小程序的一些功能分享出来,与大家探讨一下,相互学习相互进步. 先看下效果图 只写了一下效果样式的话希望大家不要太在意,下面马路杀 ...

  6. 微信小程序之上传图片和图片预览

    这几天一直负责做微信小程序这一块,也可以说是边做边学习吧,把自己做的微信小程序的一些功能分享出来,与大家探讨一下,相互学习相互进步. 先看下效果图 只写了一下效果样式的话希望大家不要太在意,下面马路杀 ...

  7. 第三方网站不能调用微信公众平台里的图片了 显示"此图片来自微信公众号平台未经允许不可引用"

    下午ytkah在自己小博客搜索时看到有几篇文章图片显示不了,再访问一些网站时发现有些图片无法显示出来,显示"此图片来自微信公众号平台未经允许不可引用",如下图所示,这个应该是最近微 ...

  8. thinkPHP5.0框架验证码调用及点击图片刷新简单实现方法

    这篇文章主要介绍了thinkPHP5.0框架验证码调用及点击图片刷新简单实现方法,结合简单示例形式分析了thinkPHP5框架验证码相关配置.后台验证.前台刷新等操作技巧,学习thinkphp源码的朋 ...

  9. JAVA调用微信接口实现页面分享功能(分享到朋友圈显示图片,分享给朋友)

    钉钉提供的内网穿透之HTTP穿透:https://www.cnblogs.com/pxblog/p/13862376.html 网页分享到微信中如何显示标题图,如果自定义标题图,描述,显示效果如下 官 ...

随机推荐

  1. CentOS7.2中systemctl的使用

    CentOS 7.x开始,CentOS开始使用systemd服务来代替daemon,原来管理系统启动和管理系统服务的相关命令全部由systemctl命令来代替. 1.原来的 service 命令与 s ...

  2. 【做题】arc068_e-Snuke Line——利用特殊性质分讨

    显然,对于所有跨度暴力扫一遍的复杂度本身只有\(O(n \log n)\). 容易想到在每一个到达的位置加上覆盖这个位置的区间数.剩下的问题就在于如何处理覆盖了多个位置的区间. 记录已访问或去重都是难 ...

  3. centos6.5下安装jdk并配置环境变量

    链接: https://blog.csdn.net/wawawawawawaa/article/details/81158943 以下链接供参考: https://blog.csdn.net/Bugg ...

  4. [CodeForces - 276A] Lunch Rush

    题目链接:http://codeforces.com/problemset/problem/276/A 从这n个输入中求最大值,注意 和 k的比较,定义一个maxn,对每个输入进行计算即可. AC代码 ...

  5. 浅谈FFT、NTT和MTT

    前言 \(\text{FFT}\)(快速傅里叶变换)是 \(O(n\log n)\) 解决多项式乘法的一个算法,\(\text{NTT}\)(快速数论变换)则是在模域下的,而 \(\text{MTT} ...

  6. Python实现机器学习算法:EM算法

    ''' 数据集:伪造数据集(两个高斯分布混合) 数据集长度:1000 ------------------------------ 运行结果: ---------------------------- ...

  7. MS-Windows中的Git命令行

    Git command line for MS-Windows Inhalt 1 Download and install, or copy the git command line suite fo ...

  8. 关于Tortoise git汉化包装了,不管用,仍然是英文菜单的问题记录

    今天在装小乌龟(TortoiseGIT)碰到了安装中文语言包不管用的情况,后来在几番折腾之后总算搞定了,但是具体哪一步搞定的,目前原因还不清楚,所以把搞定的过程记录下,留作后用: 1.Tortoise ...

  9. JavaSE习题 继承接口和泛型

    问答题: 1.子类在什么情况下可以继承父类友好成员? 答:在同一个包内 2.子类通过怎样的方法可以隐藏继承的成员变量? 答:声明一个与父类相同变量名的成员变量 3.子类重写继承的方法原则是什么? 答: ...

  10. 基于Arcface 免费离线人脸识别 2.0 Demo C#

    本来打算做个C#版demo,但没用成功.使用虹软最新人脸识别技术开发完成 过程如下: 1. 传入一张单人脸照片: 2.调用检测人脸函数ASFDetectFaces,成功返回人脸信息的指针: 3.使用 ...