小程序与H5交互以上传文件为例

最新推荐文章于 2022-12-08 17:57:15 发布

荔枝1

最新推荐文章于 2022-12-08 17:57:15 发布

阅读量3.4k

点赞数 1

本文链接：https://blog.csdn.net/u012746918/article/details/91526872

版权

1.小程序代码

<web-view src="{{uploadfile}}?token={{token}}&url={{url}} " bindmessage="postMessage"></web-view>

</view>

js:

postMessage(e) { //在web上传完文件返回到小程序页面触发，并带回上传文件时服务器返回的结果，上传多次返回数组

console.log(e)

let docIds=[];

let docName = [];

let docUrl = [];

for (let i = 0; i <e.detail.data.length;i++){

docIds.push(e.detail.data[i].ResultData[0].id);

docName.push(e.detail.data[i].ResultData[0].fileName);

docUrl.push(app.globalData.baseUrl + e.detail.data[0].ResultData[0].url);

}

app.globalData.docObj.docName = docName;

app.globalData.docObj.docUrl = docUrl;

app.globalData.docObj.docIds = docIds

}

2.html代码

<!DOCTYPE html>
<html>

   <head>
       <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
       <meta charset="UTF-8">
       <title>汇智云园</title>
       <script src="jquery-3.2.0.js"></script>
       <script src="jweixin-1.3.2.js"></script> //文件在官方文档找
   </head>

   <body>
       <form id="form1" target="frame1" method="post" enctype="multipart/form-data">
           <input type="file" name="file" id="file1" class="notFormFile">
           <input type="button" value="上传" class="btnNotForm">
       </form>
       <script type="text/javascript">

$(function () {
var request = new Object, aParams = document.location.search.substr(1).split("&"); //解析url里的参数
for (i = 0; i < aParams.length; i++) {
var aParam = aParams[i].split("=");
request[aParam[0]] = aParam[1]
}

$(".btnNotForm").click(function () {
$("#imgWait").show();
var formData = new FormData();
formData.append("myfile", document.getElementById("file1").files[0]); //请求接口传递的参数
formData.append("token",request.token);
var upUrl=request.url;
$.ajax({
url:upUrl,
type: "POST",
data: formData,
/**
*必须false才会自动加上正确的Content-Type
*/
contentType: false,
/**
* 必须false才会避开jQuery对 formdata 的默认处理
* XMLHttpRequest会对 formdata 进行正确的处理
*/
processData: false,
success: function (data) {
wx.miniProgram.postMessage({ data:data });
console.log(data);
if (data.ResultState == 1) {
alert("上传成功！");
}
if (data.ResultState == 0) {
alert(data.msg);
}

},
error: function () {
alert("上传失败！");

}
});
});
});
</script>
</body>

</html>

荔枝1

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
2
评论
小程序与H5交互以上传文件为例

1.小程序代码<view class="container"><web-view src="{{uploadfile}}?token={{token}}&url={{url}} " bindmessage="postMessage"></web-view></view>js:postMessage(e) { //在...
复制链接

扫一扫