导航菜单
首页 >  uniapp实现大文件分片上传H5端  > UNIAPP上传文件解决方案(APP端,含详细步骤,不止图片和视频)

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,不习惯的也可以自行修改

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].FileNameconsole.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)},}

相关推荐: