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

<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>

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