UNIAPP上传文件解决方案（APP端，含详细步骤，不止图片和视频）

2023-11-21 10:03| 来源: 网络整理| 查看: 265

由于UNIAPP的API并不支持APP端的文件上传，所以本方法采用H5页面上传文件

H5页面文件上传将H5页面嵌入APP里，需要用到web-view标签关于H5页面文件应该放在哪里，这里提供两个思路放在项目目录：/hybrid/html/；这样UNIAPP才会编译如果有条件可以放在服务器上（需公网IP或域名），直接通过URL访问 H5页面与APP间的数据传递

web-view传递数据问题

@message传递数据

通过@message传递数据，H5页面里上传完文件以后，获取上传后的文件信息，直接postMessage后，web-view页面会接收到到该信息，也就是APP里已接收

关于该方法可以在官网查看详细信息：web-view | uni-app官网 (dcloud.net.cn)

uni.postMessage({ data: { action: data } });

该方法会有一个问题，那就是在H5页面返回的时候才会执行postMessage的回调，如果不想让用户自己点击返回，那就给H5页面添加一个自动返回

uni.navigateBack({ delta:1 })

在H5页面使用这两个方法就必须引用UNIAPP的SDK

通过页面跳转传递文件信息

这是第二种传递文件信息的方法，将文件信息放到URL参数中：

关于跳转传参可以查看：uni-app页面跳转传递参数 - 苏槿年 - 博客园 (cnblogs.com)

uni.redirectTo({ url: './PublicMethod/FileUpload?data=' + data; }); 下面是具体实现 H5页面代码：

我这里用的是form表单提交，当然也可以用其它方式

如果想要调整样式的话，就把type="file"的input组件给隐藏，把点击事件换到其它组件上。

具体操作就是：在表单页面点击上传附件事件，会跳转到web-view页面，然后web-view页面会自动打开H5页面，提供一个上传文件的方法，上传完成后会自动返回表单页面，并且将上传的文件名带回到表单页面。

注意：Framework.js是自用的简化uni api脚本，Framework后面的方法就是uniapp自己的方法，只是简单的封装了一下。直接复制本代码是不可以直接使用的，需要把Framework部分替换一下；H5页面还用到了jquery，不习惯的也可以自行修改

DHR-文件上传APP //上传文件只使用 UNIAPP 手机端 function UploadFile() { Loading(true, '文件上传中'); setTimeout(function () { PostUrl = "这里是文件上传接口URL" var options = { headers: { 'token': '5D9BEBEE2EDF4FGHF32C04EB1058163', 'Access-Control-Allow-Origin': '*' }, url: PostUrl, success: function (data) { if (data.success == false) { top.dialogTop(data.message, "error"); Loading(false); return; } if (data.success == true) { var file = $('#uploadify').val(); var FileName = file.split("\\").pop(); var FileTheName = FileName.substring(0, FileName.lastIndexOf(".")); var FileExtendedName = FileName.substring(FileName.lastIndexOf(".")); console.log(data); console.log("文件名",FileName); console.log("文本名",FileTheName); console.log("拓展名",FileExtendedName); $("#txtRurl").val("上传成功："+FileName); top.dialogTop("上传成功", "success"); Loading(false); uni.postMessage({ data: { FileName: FileName } }); uni.navigateBack({ delta:1 }) } } } $("#form1").ajaxForm(options).submit(); }, 500) } #uploadify{ font-size: 20px; width: 100%; height: 500px; border: 1px solid #ccc; display: flex; justify-content: center; align-items: center; padding-top: 100px; padding-left: 50px; } web-view页面代码： //本页面只试用手机端 import Framework from "@/Tools/Framework.js" var _self; //本页面对象 var _NowUser; export default { data() { return { BackMethod: null, webviewStyles: { progress: { color: '#FF3333', } }, webUrl: '', } }, onNavigationBarButtonTap(e) { if (e.text == "X") { Framework.CloseThisPage() } }, onLoad(req) { //当前页面 _self = this; if (typeof(req.BackMethod) == "undefined" || req.BackMethod == "") { //返回的方法 Framework.showToast("没有传入返回方法BackMethod"); setTimeout(function() { Framework.NavigateBack(); }, 2000) } if(typeof(req.data) == "undefined" || req.data == ""){ Framework.showToast("没有传入返回方法BackMethod"); setTimeout(function() { Framework.NavigateBack(); }, 2000) } _self.BackMethod = req.BackMethod; _self.webUrl = "H5页面地址" // // #ifdef MP-WEIXIN // Framework.showToast("本页面只适用手机端"); // setTimeout(function() { // Framework.NavigateBack(); // }, 2000) // // #endif }, methods: { getMessage(event) { console.log(event); var fname = event.detail.data[0].FileName console.log(fname); var prevPage = Framework.GetprevPage(); //上一页页面实例 if (typeof(prevPage) == "undefined") { //没上一页面 return; } for (let var1 in prevPage.$vm.$options.methods) { if (var1 == _self.BackMethod) { var fun = prevPage.$vm.$options.methods[var1]; fun(fname) Framework.NavigateBack(); } } } } } 表单页面： methods:{ //上传文件 upload(){ console.log('上传文件') Framework.navigateTo("跳转到web-view页面，页面路径"); }, SetFile(Fname) { if(Fname == ''||typeof(Fname) == "undefined"){ return; } console.log("回来的文件名" + Fname) }, }

【本文地址】

公司简介

联系我们