快应用web组件不支持<input type="file">的临时变通方法

jy

快应用web组件目前还不是的元素，所以在web组件中暂时无法直接上传文件，据说6月份新出的1010版本上会支持，但是不知道可以支持到什么程度，能否支持拍照上传呢？？？ 现在自己在开发的项目原来在web页面上就有用户注册功能，在快应用上也放了注册入口，但是注册时无法通过input上传证照图片，只好变通的实现。 查看web组件的相关帮助文档 https://doc.quickapp.cn/widgets/web.html 发现有titlereceive事件，这个和原来windows应用程序开发时的webbrowser控件的titlechange事件是一样的，都可以实现web组件主动通知框架程序的功能，由此也就来思路了。 假定原来在自己的h5页面上有个控件，用来选择图片文件，并将图片上传到指定URL上进行接收,URL上已经同时指定了接收后要存储的路径和存储文件名（下面简称接收URL），上传成功后可以预知已上传文件的URL（下面简称文件URL） 首先修改h5页面上的input按钮的相关功能，可以根据来源决定是否使用控件，从快应用打开页面时用button代替即可，onclick时，动态的改变h5页面的title，然后定时判断文件是否上传成功

1. function btnClick(){
2. //改变页面标题，用于通知快应用要上传图片啦
3. var tit = document.title;
4. document.title = "upload@@接收URL";
5. setTimeout(function(){document.title = tit;},1000); //设置完毕后进行title复原，保证下次调用时可以改变title
7. //启动定时器，定时判断图片是否已经上传到服务器，最好指定最大判断次数
8. var qmImgChkTimes = 0;
9. var qmImgChk = parseInt($(this).attr("intid"));
10. qmImgChk > 0 && clearInterval(qmImgChk);
11. qmImgChk = setInterval(function(){
12. var iUrl = 文件URL;
13. //判断文件是否上传成功
14. $.ajax({
15. type:'head',
16. url:iUrl,
17. cache:false,
18. async:false,
19. success:function(data,textStatus, xhr){
20. clearInterval(qmImgChk);
21. //文件已经上传，进行后续操作
24. }
25. });
27. qmImgChkTimes ++;
28. //检测30次后不再检测
29. if(qmImgChkTimes > 30){
30. clearInterval(qmImgChk);
31. }
32. }, 2000);
33. $(this).attr("intid", qmImgChk);
34. }

复制代码

快应用在界面上摆放的web组件中定义titlereceive事件

1. <web id="web" ontitlereceive="onWebTitReceive" ></web>

复制代码

然后在titlereceive事件中检测是否有文件上传的请求，有上传请求时弹出上传提示，可以选择拍照上传或从图库中选择

1. import prompt from '@system.prompt'
2. import webview from '@system.webview'
3. import request from '@system.request'
4. import media from '@system.media'
5. import network from '@system.network'
9. onWebTitChange(obj){
10. var that = this;
11. if(!obj.title){return}
12. if(obj.title.indexOf('upload@') == 0){
13. var finfo = obj.title.substr(8, 100000);
14. that.onNetworkType(function(m, tp){
15. if(tp == "none"){
16. msgbox("当前网络不可用，无法上传文件！")
17. return;
18. }
19. var msg = (m ? '您当前正在使用 ' + tp.toUpperCase() + ' 模式上网，上传文件会耗费流量，确定继续吗？\r\n\r\n' : '') + '继续请选择文件上传方式';
20. var btnA = [{
21. text: '拍照上传',
22. color: '#3CC51F'
23. },{
24. text: '图库中选择',
25. color: '#00a7e6'
26. }];
27. if(m){
28. btnA.push({text: '取消',color: '#f44336'})
29. }
30. prompt.showDialog({
31. title: '文件上传',
32. message: msg,
33. buttons: btnA,
34. success: function (res) {
35. if (res.index == 0) {
36. media.takePhoto({
37. success: function (data) {
38. that.onFileUpload(finfo, data.uri);
39. }
40. });
41. }else if (res.index == 1){
42. media.pickImage({
43. success: function (data) {
44. that.onFileUpload(finfo, data.uri);
45. }
46. });
47. }
48. }
49. });
50. });
51. }
52. },
53. onFileUpload(furl, furi){
54. //furl为接收URL， furi为本地文件路径
55. var that = this;
56. var fname = 解析furl获取文件名
57. //开始上传文件...');
58. request.upload({
59. url: furl,
60. files: [
61. {
62. uri: furi,
63. name: 'file',
64. filename: fname
65. }
66. ],
67. success: function (data) {
68. //上传成功
69. },
70. fail: function (data, code) {
71. //上传失败
72. }
73. });
74. },
75. onNetworkType(callback){
76. network.getType({
77. success: function (data) {
78. if(callback){
79. callback(data.metered, data.type);
80. }
81. }
82. })
83. }

复制代码

这种做法的弊端是h5页面中要定时去判断文件是否上传，会消耗一定的流量，同时h5和快应用都需要进行改动适配。 优势就是可以选择图片上传，也可以拍照上传，还可以在上传前判断手机端的网络状况。（下一版本的快应用据说也会支持选择非图片文件的接口） 下一版本即便支持了h5页面中的input上传功能，也不能确定是否支持拍照上传，所以上述变通方法也许在版本升级后还会有使用的意义

Art3mis_