<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. 最后一次谈 VirtualBox的安装方法

    用 VirtualBox....run 或 .rpm安装都可以, 最重要的是要 用 /usr/sbin/vboxconfig -> vboxdrv.sh --> 去创建 VirutalBo ...

  2. Dockerfile 收集

    Dockerfile 收集 1.最基础的oracle-jdk FROM centos:7.2.1511 MAINTAINER hongdada "hongdaqi159505@gmail.c ...

  3. 【做题】CFedu41G. Partitions——推式子

    实际上这题的题面还是颇有意思,对两个划分不同的定义暗示了第二类斯特林数,模数是\(1000000007\)又表明这题不是NTT. 那么一开始的想法是考虑每个集合的贡献.设这个集合为\(S\),那么它的 ...

  4. 到底什么是 ROI Pooling Layer ???

    到底什么是 ROI Pooling Layer ??? 只知道 faster rcnn 中有 ROI pooling, 而且其他很多算法也都有用这个layer 来做一些事情,如:SINT,检测的文章等 ...

  5. (转) The care and maintenance of your adviser

    The care and maintenance of your adviser Ever since the advent of graduate school, students have com ...

  6. (zhuan) Variational Autoencoder: Intuition and Implementation

    Agustinus Kristiadi's Blog TECH BLOG TRAVEL BLOG PORTFOLIO CONTACT ABOUT Variational Autoencoder: In ...

  7. 通过sql语句修改表的结构

    1.修改表的列名 oracle: ALTER TABLE 表名 RENAME COLUMN 列名 TO 新列名sqlserver:exec sp_rename '[表名].[列名]','[表名].[新 ...

  8. Codeforces 855C. Helga Hufflepuff's Cup----树形DP

    z最近在学习树形DP...好难啊. 在cf上找到了一题c题当模版马克一下. 题目不贴了..>>http://codeforces.com/problemset/problem/855/C& ...

  9. 17秋 SDN课程 第一次上机作业

    第一题 拓扑: 测试连通性: 第二题 拓扑: 测试连通性: 第三题 拓扑: 测试连通性:

  10. 总结Javascript中数组各种去重的方法

    相信大家都知道网上关于Javascript中数组去重的方法很多,这篇文章给大家总结Javascript中数组各种去重的方法,相信本文对大家学习和使用Javascript具有一定的参考借鉴价值,有需要的 ...