UNIAPP上传文件解决方案（APP端，含详细步骤，不止图片和视频）
UNIAPP上传文件解决方案（APP端，含详细步骤，不止图片和视频）
由于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，不习惯的也可以自行修改
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DHR-文件上传APP</title>
<script src="./Content/Scripts/jquery/jquery-3.5.1.min.js"></script>
<!--表单验证组件start-->
<script src="./Content/Scripts/jquery/jquery.form.js"></script>
</head>
<body>
<form id="form1" method="post" enctype="multipart/form-data">
<script src="./Content/Scripts/utils/uni-webview.js"></script>
<script>
//上传文件 只使用 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)
}
</script>
<div style="margin: 10px">
<div>
<input id="uploadify" name="uploadify" type="file" onchange="UploadFile()">
</div>
<div style="height: 35px; font-size: 30px">
<input id="txtRurl" name="txtRurl" style="width:100%" readonly="readonly">
</div>
</div>
</form>
</body>
<style>
#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;
}
</style>
</html>
web-view页面代码：
<template>
<view>
<web-view @message="getMessage" :webview-styles="webviewStyles" :src="webUrl"></web-view>
<iew>
</template>
<script>
//本页面只试用手机端
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();
}
}
}
}
}
</script>
表单页面：
methods:{
//上传文件
upload(){
console.log('上传文件')
Framework.navigateTo("跳转到web-view页面，页面路径");
},
SetFile(Fname) {
if(Fname == ''||typeof(Fname) == "undefined"){
return;
}
console.log("回来的文件名" + Fname)
},
}
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 三行代码完成国际化适配，妙~啊~
· .NET Core 中如何实现缓存的预热？