<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. (转载)Navicat Premium 12.1.16.0安装与激活

    声明:本文所提供的所有软件均来自于互联网,仅供个人研究和学习使用,请勿用于商业用途,下载后请于24小时内删除,请支持正版! 本文介绍Navicat Premium 12的安装.激活与基本使用.已于20 ...

  2. (转载)C#语言开发规范

    1.  命名规范a) 类[规则1-1]使用Pascal规则命名类名,即首字母要大写.eg:Class Test{...}[规则1-2]使用能够反映类功能的名词或名词短语命名类.[规则1-3]不要使用“ ...

  3. springboot搭建环境整合jsp页面整合mybatis

    1.pom文件依赖 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www ...

  4. POJ 3414 Pots(罐子)

    POJ 3414 Pots(罐子) Time Limit: 1000MS    Memory Limit: 65536K Description - 题目描述 You are given two po ...

  5. 51nod 1349 最大值(单调栈)

    http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1349 题意: 求区间内最大值大于等于k的区间个数. 思路: 利用求出对于 ...

  6. 1.1.1 vue-cli脚手架工具

    参考文档: windows下npm安装vue(以下教程大部分都是参考这篇博客的,按照着这篇博客自己实现了一遍) npm安装vue-cli脚手架 一.前言 npm:nodejs下的包管理器,安装好nod ...

  7. oracle的批量操作sql语句

    1.批量删除/批量更新 mapper: <update id="updatePrjStateByFPrjId" parameterType="string" ...

  8. linux使用技巧,返回上一次目录

    cd - 当你一不小心,走岔了的时候,可以通过这个命令,直接找回上一次的路径.

  9. PHP直接将文件流转换为字符串

    有时候不需要图片直接输出到浏览器,需要如下处理! 输出到浏览器 $qrCode = new QrCode(); $qrCode ->setText('Life is too short to b ...

  10. 使用lombok 找不到方法

    在setting里面查找并设置就好了