uview3.0前端框架图片组件上传到VFP后端接收

最新推荐文章于 2024-08-23 15:37:13 发布

加菲猫的VFP

最新推荐文章于 2024-08-23 15:37:13 发布

阅读量553

点赞数

文章标签：前端框架

本文链接：https://blog.csdn.net/fitche/article/details/131862916

版权

最近猫猫用的uview3.0框架，基于Uni-app平台的，虽然叫3.0却是基于uview1.8.3开发的。

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最简代码如下：

<u-upload   ref="uUpload1"  :action="action" ></u-upload>

action变量的值等于ctl_file.fsp?proc=upfile

VFP后端接收

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("images\order")
    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"}

但是还是预览图显示出来，我们的目的是不显示预览图，或者显示一个错误。

那么我在上传成功的时候，触发一个方法，来删除这个预览图，或者设为上传失败。

<u-upload  ref="uUpload1"  :action="action"  @on-success="upsuccess"></u-upload>

upsuccess方法

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); //上传失败删除