爆肝怒赞，不会也会了，VFPBS用Form调用webapi和文件上传

加菲猫的VFP

发布于 2021-12-01 20:45:52

5290

发布于 2021-12-01 20:45:52

文章被收录于专栏：加菲猫的VFP

我们的网页可以用POST方式调用webapi吗？

答案是肯定的

form提交数据到webapi

打开HBULIDX，新建一个网页，在HTML的BODY中输出如下代码，保存到框架的wwwroot目录。

<form action="a3post.fsp?proc=PostParams" method="post">
<input name="name" value="张三">
<input name="age" value="20">
<input type="submit" value="提交">
</form>

效果如下图

action很关键为提交的webapi网址, method为提交的类型post，当然也可以写成GET 这里的POST提交的参数不会在地址栏出现，而GET将会在地址栏出现。这是web1.0时代的技术，现在是web2.0同样也是离不开1.0本质，学东西一定要先学本质，不要被花式迷了眼。

后端用VFP的webapi接收

Define Class a3post As Session
    *--接受发过来的POST所有数据 并返回去 POSTMAN是UTF8编码发过来，回发要加strconv(str,11)
    Procedure Post
    LOCAL cPostData
    cPostData=HttpGetPostData(this.iconnid)
    RETURN cPostData  
    Endproc

    *--解析键值对格式 name=张三&age=21
    Procedure PostParams
    LOCAL cname,cage
    cname=httpqueryparams("name",this.iconnid)
    cage=httpqueryparams("age",this.iconnid)
    RETURN "姓名:"+cname+"年龄:"+cage  
    Endproc
enddefine

浏览器输入 http://192.168.0.99:801/form.html 如果你有配置了内网穿透，就可以用内网穿透的域名访问。 http://qiyusoft.free.idcfengye.com/form.html 可以看到执行结果如下图。

form进行文件上传

1 编写HTML前端页面，文件名fileupload.html存放在WWWROOT目录下，

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <form action="ctl_file.fsp" method="post" enctype="multipart/form-data">
      <input type="text" name="ttt" value="">
      <input type="file" name="myfile">
      <input type="submit" value="保存"/>
    </form>
  </body>
</html>

代码解析： 1　form表单的action指向了VFP后端的ctl_file类，也就是这个表单的内容会被ctl_file类所接收。

2　enctype参数multipart/form-data表示表单由键值对提交的方式，改成文件上传模式。

3　在 HTML 文档中

 <input type="file">

标签每出现一次，一个 FileUpload文件对象就会被创建。它包含一个文本输入字段，用来输入文件名，还有一个按钮，用来打开文件选择对话框选择文件。

如果要过滤指定后缀的文件，添加accept属性，如只能选择rar文件

<input class="style_file_content" accept=".rar" type="file" />

切记：value属性不要写,name的值是给后端用的

2 编写VFP后端代码

Define Class ctl_file As Session
  Procedure ondefault
      clear
    oFile=getupfile()
    ?"ttt的值",oFile.oFieldColl.Item("ttt").fielddata
    ?"上传文件名",oFile.oFieldColl.Item("myfile").filename
    *--文件数据
    cFileData=oFile.oFieldColl.Item("myfile").fielddata
    *--文件保存起来
    STRTOFILE(cFileData,getwwwrootpath()+"1.rar")
  return "ok"
  Endproc
Enddefine

代码解析：　HTML前端FORM是文件上传模式，所以我们利用getupfile()来接收，它会返个文件对象，包含了一个集合，每个集合的KEY就是前端传入的name字段。

结构：oFieldColl集合，item(key)是个对像存放每个字段的相关内容。集合的key=前端的name

　oFieldColl.item(key).FieldName:字段名 (前端传入的name)

oFieldColl.item(key).FieldData: 字段值(前端传入的value)

　oFieldColl.item(key).FileName: 文件名，如果上传的是文件类型，这里可以获取原始文件名。

　oFieldColl.item(key).FieldType:字段类型

getwwwrootpath的作用指向wwwroot目录，编译之后，就是网站根目录。

可以看到VFP有输出了

查看wwwroot目录

在公众号中使用我们的网页

1 这个网址可以放到菜单栏里 2 也可以用消息回复或发送给用户

{
    "touser":"oH69RwCyPr8uQxBFHfyaYurvQ8Mk",
    "msgtype":"text",
    "text":
    {
         "content":"<a href='http://qiyusoft.free.idcfengye.com/form.html'>提交数据</a>"
    }
}