vk-uview-ui 是 VK 基于 uview-ui 1.8.3 版本改造而来，其本质依然还是 uview-ui，是 VK 的珍藏版，由 VK 维护。
uview-ui 是 vk-unicloud 快速开发框架 之 client端框架 中推荐的UI，很多 VK框架 用户都在用 uview-ui
由于 uview-ui 作者目前重心全在 uView 2.0 的 nvue 版本上，故没有精力维护 uView 1.0，因此作者贡献出了自己珍藏的 vk-uview-ui 版本。
在这里，也感谢 uview-ui 作者的开源奉献，再次为开源点赞。 同时 vk-uview-ui 也是无条件开源。
组件使用很简单，j最简代码如下：
代码语言：javascript复制 <u-upload ref="uUpload1" :action="action" ></u-upload>action变量的值等于ctl_file.fsp?proc=upfile
VFP后端接收
代码语言：javascript复制
Define Class ctl_file As session
PROCEDURE upfile
Local oResult
Private nspuId
oResult=GetUpFile() &&返回为集合对象
cFilename=oResult.ofieldcoll.Item("file").filename &&文件名 跟上传name(微信)对应 key (mui) 对应
cExtName=Justext(cFilename)
cFilename=Ttoc(Datetime(),1) Right(Transform(Second()*1000),6) "." cExtname &&生成文件名
cMydata=oResult.ofieldcoll.Item("file").fielddata &&文件内容
cFilePath=getwwwrootpath("imagesorder")
If !Directory(cFilePath)
Md &cFilePath
Endif
If Strtofile(cMydata,cFilePath cFilename)<=0
Error "写入文件失败，目录是否存在且可读写"
Endif
RETURN TEXTMERGE('{"name":"test","url":"images/order/<<cFilename>>"}')
ENDPROC
ENDDEFINE 这里有两个关键点
- 文件的key叫啥,这是默认叫file,实际也可以变更的。
- 接收的URL返回远程文件名 "url":"images/order/<<cFilename>>"
如果这里有存在一个问题，就是上传不成功，比如框架ERROR打断执行，返回{"errno":1089,"errmsg":"NO OK"}
但是还是预览图显示出来，我们的目的是不显示预览图，或者显示一个错误。
那么我在上传成功的时候，触发一个方法，来删除这个预览图，或者设为上传失败。
代码语言：javascript复制 <u-upload ref="uUpload1" :action="action" @on-success="upsuccess"></u-upload>upsuccess方法
代码语言：javascript复制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.form.files.push(data.url);
},这里就会显示上传失败，然后你点击预览图就会显示重新上传。
也可以设为删除。
this.$refs.uUpload1.lists.splice(index,1); //上传失败删除
