我在微信开发者工具测试一切好好的,用在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)
效果如下: