PDA使用uview3.0上传图片组件缩略图不显示的问题解决

news2024/12/23 11:11:58

def4f7083032c687f77b0b1f3e473ca4.gif

猫猫在为社群的梁总开发PDA扫码程序,接上VFP猫框后端,简直爽歪歪,开发又快又好。

终于快上线了,结果发现里面一个图片上传的功能,上传成功后,在PDA上看不到缩略图。

我在微信开发者工具测试一切好好的,用在H5一测试,果然不显示,用APP模式测试,也不显示。于是开始了修复BUG之路。。

过程之艰辛就不提啦,代码修复如下。

<template>
  <view class="wrap">
    <view style="margin: 20upx;">
      <u-form  ref="form1">
        <!--   <u-form-item label="房台编号"  label-width="auto"><u-input :disabled="true" v-model="roomid" /></u-form-item> -->




        <u-form-item label="文件名" label-width="auto">{{filename}}</u-form-item>
        </u-form-item>
        <u-upload max-count="1" ref="uUpload1" 
          :file-list="lists"    @on-success="upsuccess":action="action">


        </u-upload>
        <button @click="save">保存</button>
      </u-form>  
    </view>
  </view>
</template>


<script>
  import glob_Data from '@/common/global_data.js' //导入全局变量  
  import qiyuajax from '@/common/Qiyu_request.js'
  export default {
    data() {
      return {
        action: glob_Data.globaldata.serverurl + 'ctl_image.fsp?proc=upfile', 
        showUploadList: true,
        lists: [],
        files: [],
        oldfilename:"",
        filename: "",
        wlbh: "",
      }
    },
    onLoad:function(opts){      
      var oItem=JSON.parse( decodeURI(opts.item));
      this.oldfilename=oItem.itm_fname;
      this.filename=oItem.itm_fname;
      this.wlbh=oItem.shpd_wldm;
      if(this.filename){
        this.lists.push({
          url:glob_Data.globaldata.serverurl +'ctl_image.fsp?proc=getfile&file='+oItem.itm_fname
        })
      }


    }, 
    methods: {
            save:async function(){
        var _this = this;
        if(this.filename==this.oldfilename){
          this.$msg("未上传新图片")
          //return;
        }
        var url = "api/ctl_image.fsp?proc=save"
        var senddata = {
          token: uni.getStorageSync("token"),
          oldfile:this.oldfilename,
          file:this.filename,
          wlbh:this.wlbh 
        }
        var mydata = await qiyuajax.qiyu_ajax_request(url, senddata)
        if (mydata.errno && mydata.errno != 0) {
          this.$msg(mydata.errmsg);
          return; 
        }
        this.$msg("保存成功");
        uni.$emit("upimg",{
          file:this.filename,
          wlbh:this.wlbh 
        })
        uni.navigateBack()
      },
      upsuccess: function(data, index, lists, name) {
        console.log(this.$refs.uUpload1.lists);
        //console.log(index,name);
        if (data.errno && data.errno != 0) {
          this.$msg(data.errmsg);
          var item = this.$refs.uUpload1.lists[index];
          item.error = true;
          this.$refs.uUpload1.lists.splice(index, 1, item); //上传失败设为失败          
          return;
        }
        this.filename=data.filename;
        this.files.push(data.url);
        //修复uview bug
        var mylen=this.lists.length;
                this.lists.push(data.url);
                this.lists.splice(0,mylen+2)
      },
    }
  }
</script>


<style lang="scss">
  .wrap {
    padding: 24rpx;
  }


  .slot-btn {
    width: 341rpx;
    height: 140rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgb(244, 245, 246);
    border-radius: 10rpx;
  }


  .slot-btn__hover {
    background-color: rgb(235, 236, 238);
  }


  .pre-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
  }


  .pre-item {
    flex: 0 0 48.5%;
    border-radius: 10rpx;
    height: 140rpx;
    overflow: hidden;
    position: relative;
    margin-bottom: 20rpx;
  }


  .pre-item-image {
    width: 100%;
    height: 140rpx;
  }
</style>

代码的关键在这里,初始显示的的lists添加上传成功的URL,然后再移除就可以了。

var mylen=this.lists.length;
 this.lists.push(data.url);
 this.lists.splice(0,mylen+2)

效果如下:

54ac779aa0125635f1bce418318a4843.png

7a21b52391ce76599cd9c08fcdcee1f1.jpeg

2cc327c487ced79c0300ca4133426248.jpeg

猫猫的心里话

加菲猫的VFP|狐友会社群接收投稿啦

加菲猫的VFP,用VFP不局限VFP,用VFP混合一切。无论是VFP,还是JS,还是C,只要能混合起来,都可以发表。

商业模式,销售技巧、需求规划、产品设计的知识通通可以发表。

暂定千字50元红包,,优秀的文章红包更大,一经发表,红包到手。

如何帮助使用VFP的人?

用VFP的人,有专业的,有非专业了,很多人其实是小白,问出的问题是小白,如果问题不对,我们引导他们问正确的问题。无论如何请不要嘲笑他们说帮助都不看,这么简单的问题都不会,嘲笑别人不行,而无法提出建设性答案,是很low的。

我们无论工作需要,还是有自己的软件,都是是需要真正的知识,如何让更多人学习真正的VFP知识呢,只需要点赞,在看,能转发朋友圈就更好了。

加菲猫的vfp倡导用"VFP极简混合开发,少写代码、快速出活,用VFP,但不局限于VFP,各种语言混合开发"

我已经带领一百多名会员成功掌到VFP的黑科技,进入了移动互联网时代,接下来我们要进入物联网领域。

2023年狐友会社群会员继续招募中

社群会员获取的权益有:

祺佑三层开发框架商业版(猫框),终身免费升级,终身技术支持。

开放的录播课程有:

微信小程序,微信公众号开发,H5 APP开发,Extjs BS开发,VFP面向对象进阶,VFP中间层开发。

源码类资源有:

支付组件源码,短信源码,权限组件源码,一些完整系统的源码。这个可以单独出售的,需要的可以联系我。

会员也可以实现群内资源对接,可以接分包,合作等各项商业或技术业务

256463801d07715e4ff6d4d3fd352cfc.gif

2a6b35c74937b2728f81e6fe3c9337fc.jpeg

e326cac7c759725da21460996eb2c2f3.gif

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1024800.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

易点易动固定资产管理平台:打破数据孤岛,实现一站式闭环管理

在现代企业中&#xff0c;固定资产管理的数据孤岛问题一直是制约企业管理效率的重要因素。然而&#xff0c;通过易点易动固定资产管理平台&#xff0c;企业可以实现ERP、OA系统、BPM系统、财务系统等多个系统的打通&#xff0c;打破数据孤岛&#xff0c;实现固定资产的一站式闭…

网络编程 day2

TCPser TCPcli UDPser UDPcli

HTML常用基本元素总结

<!DOCTYPE html> <html> <head> <meta charset"utf-8"> <title> biao qian</title> </head> <body><h1>这是标题1</h1> <h2>这是标题2</h2> <h3>这是标题3</h3><p> 这…

半导体产品使用高温老化测试技术

主要功能&#xff1a;为了达到满意的合格率&#xff0c;几乎所有产品在出厂前都必须经过老化处理。制造商如何在不缩短老化时间的情况下提高效率&#xff1f;本文介绍了一种在老化过程中进行功能测试的新方法&#xff0c;以减少和缩短与老化过程相关的成本和时间问题。 在半导…

SSH终端使用——高级篇

1 SSH终端快捷按钮的使用 在对话框按快捷键“ctrl”“h”,可以弹出脚本代码&#xff0c;快捷输入。 2 切换终端风格 对话框右下角&#xff0c;点击可切换终端风格&#xff1b; 点击可切换文字大小。 3 打开文件图形和文件字符窗口 右键连接&#xff0c;选择“打开”&a…

Multisim14.0仿真(十八)74LS138译码器

一、仿真原理图&#xff1a; 二、74LS138译码器真值表 当选通端G1为高电平&#xff0c;选通端G2A、G2B为低电平时&#xff0c;地址端A、B、C的二进制编码在Y0~Y7对应的输出端以低电平译出。 三、仿真效果图&#xff1a;

为什么基于树的模型在表格数据上击败深度学习

一、说明 随着深度学习和新的一亿参数模型的大肆宣传&#xff0c;人们很容易忘记这些大型神经网络只是工具&#xff0c;它们有其所有的偏见和弱点。我通过我的内容强调的想法之一是&#xff0c;您应该拥有多样化技能的坚实基础&#xff0c;以便您能够以有效且高效的方式解决问题…

一遍关于vue基础语法下篇

目录 一.事件处理器 演示效果&#xff1a; 二.表单 演示效果&#xff1a; 三.组件通信父转子 演示效果&#xff1a; 四.组件通信子转父 演示效果&#xff1a; 好啦&#xff0c;今天的分享就到这了&#xff0c;希望能够帮到你呢&#xff01;&#x1f60a;&#x1f60a; 一.…

Linux上的Pip和Python升级指南

在Linux系统上&#xff0c;保持Pip和Python版本的最新状态对于顺利进行Python开发至关重要。通过升级Pip和Python&#xff0c;你可以享受到最新的功能、修复的bug以及提升的开发效率。本文将为你提供在Linux上升级Pip和Python的详细指南&#xff0c;助你打造更强大的开发环境。…

AI独角兽第四范式开启招股:或将成为今年港股IPO最大赢家!

国内最大的以平台为中心的决策类人工智能公司第四范式&#xff0c;在9月18日至9月21日招股&#xff0c;并计划于9月28日正式以“6682”为股票代码在香港联交所主板挂牌上市。第四范式即将成为近两年来第一家登陆港交所的AI独角兽企业&#xff0c;同时也将是近一年来第一家完成港…

数据库顶会 VLDB 2023 论文解读 - Krypton: 字节跳动实时服务分析 SQL 引擎设计

“Krypton 源于 DC 宇宙中的氪星&#xff0c;它是超人的故乡&#xff0c;以氪元素命名”。 引言 近些年&#xff0c; 在复杂的分析需求之外&#xff0c;字节内部的业务对于实时数据的在线服务能力也提出了更高的要求。大部分业务不得不采用多套系统来应对不同的 Workload&…

人大金仓开启智慧医疗服务新时代

9月16日至17日&#xff0c;由海南省信息化专家协会主办&#xff0c;人大金仓协办的海南数字医院信创发展研讨会圆满举办。人大金仓与海南省二十余家医院的信息化负责人&#xff0c;以及设计院、生态伙伴的专家领导进行了深入交流与沟通&#xff0c;相关领导和专家就人大金仓低难…

C语言的编译过程详解

当我们编译C程序时会发生什么&#xff1f;编译过程中的组件有哪些&#xff0c;编译执行过程是什么样的? 什么是编译 C语言的编译过程就是把我们可以理解的高级语言代码转换为计算机可以理解的机器代码的过程&#xff0c;其实就是一个翻译的过程。 …

python-列表解析、字典解析、集合解析

前言&#xff1a; 嗨喽~大家好呀&#xff0c;这里是魔王呐 ❤ ~! python更多源码/资料/解答/教程等 点击此处跳转文末名片免费获取 列表解析 生成一个列表 nums [1, 3, 9] list_gen [num**2 for num in nums if x < 5] # [1, 9]代码描述&#xff1a; 表达式&#xff…

基于SpringBoot+Vue的餐饮管理系统设计与实现

前言 &#x1f497;博主介绍&#xff1a;✌全网粉丝10W,CSDN特邀作者、博客专家、CSDN新星计划导师、全栈领域优质创作者&#xff0c;博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java、小程序技术领域和毕业项目实战✌&#x1f497; &#x1f447;&#x1f3fb;…

亚马逊云科技 Amazon Lightsail :一种在云服务器上运行容器的简单方法

当向开发人员介绍亚马逊云科技云服务时&#xff0c;通常会花一点时间来介绍并演示 Amazon Lightsail 。它是迄今为止开始使用亚马逊云科技的最简单方法。使用它&#xff0c;您在几分钟内即可在自己的虚拟服务器上运行您的应用程序。而后增加了在 Amazon Lightsail 上部署基于容…

[echarts] 两侧堆叠柱状图

http://echarts.zhangmuchen.top/#/detail?cidxOQSXIOQiK const myData [福田区, 罗湖区, 南山区, 盐田区, 宝安区, 龙岗区, 坪山区, 龙华区, 光明区, 大鹏区]; // 全彩屏&#xff0c;双基色屏&#xff0c;简易屏&#xff0c;条形屏 const offLine [[20, 40, 60, 60, 10, 2…

C语言 coding style

头文件 The #define Guard #define的保护文件的唯一性&#xff0c;防止被多重包含 格式 : <PROJECT>_< FILE>_H_ PROJECT : XS FILE : MV_CTR 头文件的包含顺序 C System FilesOther LibrariesUser LibraryConditional include 作用域 局部变量 -变量定义时需要…

Vuex状态管理最佳实践

文章目录 单一状态树使用模块使用常量定义Mutation类型使用Actions处理异步操作使用Getters计算属性严格模式分模块管理Getter、Mutation和Action&#xff1a;注释和文档&#xff1a;Vue Devtools ✍创作者&#xff1a;全栈弄潮儿 &#x1f3e1; 个人主页&#xff1a; 全栈弄潮…

计算机视觉与深度学习-卷积神经网络-纹理表示卷积神经网络-纹理表示-[北邮鲁鹏]

目录标题 参考文章纹理定义纹理的分类规则纹理随机纹理 纹理的表示方法基于卷积核组思路什么卷积核组卷积核类型&#xff08;边缘、条形、点状&#xff09;卷积核尺度&#xff08;3~6个尺度&#xff09;卷积核的方向卷积核组的设计 表示步骤步骤一&#xff1a;设计卷积核组。步…