1. <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
  1. 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. MySQL 命令操作数据表

    MySQL 命令操作数据表 1.查看表信息 desc hs_user_credit_info; 2.新增表字段 alter table hs_credit_order add search_relat ...

  2. HDU 6406 Taotao Picks Apples & FJUT3592 做完其他题后才能做的题(线段树)题解

    题意(FJUT翻译HDU): 钱陶陶家门前有一棵苹果树. 秋天来了,树上的n个苹果成熟了,淘淘会去采摘这些苹果. 到园子里摘苹果时,淘淘将这些苹果从第一个苹果扫到最后一个. 如果当前的苹果是第一个苹果 ...

  3. 几个优化SQL查询的方法

    1.什么是执行计划 执行计划是数据库根据SQL语句和相关表的统计信息作出的一个查询方案,这个方案是由查询优化器自动分析产生的,比如一条SQL语句如果用来从一个 10万条记录的表中查1条记录,那查询优化 ...

  4. spring配置redis

    <?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.spr ...

  5. pitch, yaw, roll

    在航空中,pitch, yaw, roll下图所示. pitch是围绕X轴旋转,也叫做俯仰角. yaw是围绕Y轴旋转,也叫偏航角. roll是围绕Z轴旋转,也叫翻滚角.

  6. DAG最小路径点覆盖

    Problem 给出一个有向无环图 (\(DAG\)),求出最少使用其中多少条互不相交的路径覆盖所有点. Solution 若有 \(n\) 个点,对于每个点 \(i\) ,我们将它拆成两个点 \(i ...

  7. HDU 4859 海岸线(最小割+最大独立点权变形)

    http://acm.hdu.edu.cn/showproblem.php?pid=4859 题意: 欢迎来到珠海!由于土地资源越来越紧张,使得许多海滨城市都只能依靠填海来扩展市区以求发展.作为Z市的 ...

  8. Newtonsoft.Json 去掉\r\n

    itemKindList.ToString(Newtonsoft.Json.Formatting.None)

  9. 【Ruby】【高级编程】正则

    #[[正则]]=beginsub 和 gsub 及它们的替代变量 sub! 和 gsub! 是使用正则表达式时重要的字符串方法.所有这些方法都是使用正则表达式模式执行搜索与替换操作.sub 和 sub ...

  10. 【Java】【存储&作用域】

    [存储] 1. 寄存器.这是最快的保存群裕,因为它位于和其他所有保存方式不同的地方:处理器内部.然而,寄存器的数量有限,所以寄存器是根据需要由编译器分配.我们对此没有直接的控制权,也不可能在自己的程序 ...