微信小程序上传本地文件 webview

孙可爱.

已于 2023-11-15 14:44:55 修改

阅读量2.8k

点赞数 2

分类专栏：微信小程序文章标签：微信小程序 javascript 前端小程序

于 2023-05-23 11:32:34 首次发布

本文链接：https://blog.csdn.net/weixin_44383533/article/details/130822980

版权

微信小程序专栏收录该内容

12 篇文章 2 订阅

订阅专栏

我们通过查看微信官方文档

图片可以选择本地文件但是文件不允许

文件只支持上传聊天中的文件并不允许手机选择本地文件

这并不能满足我们使用的需要但是我们可以通过webview来实现

这里需要注意的是我们需要将网址配置到域名白名单中

web-view | 微信开放文档

案例使用：微信小程序 vue项目

原理：

小程序通过webview 内嵌网页端的上传文件网页地址

通过内嵌的网页将文件传输到后端，后端返回文件地址及文件信息的列表

网页端通过导入的weinxin-js-sdk包调用其中的postMessage 函数将文件信息&文件地址传回小程序

小程序接收到信息会调用 bindMessage的postMessage方法

传参就是文件信息然后我们将文件展示出来就好啦

web网页-vue设置:

方法1:script 找到index.html 将jssdk写入

    <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>

方法2:或者npm 下载jsdk

npm install weixin-js-sdk --save
import wx from 'weixin-js-sdk'

正式开始：我们在web网页中的上传文件的按钮click 上传文件方法

import { wxUploadFile } from '@/api/files'
..... 
 methods: {
    //这里就是正常的上传文件流的方法 wxUploadFile是后端给你的上传文件的地址请求
    uploadFile (info) {
      const { file } = info
      const formData = new FormData()
      formData.append('file', file)
      wxUploadFile(formData).then((res) => {
        //这里将上传后的文件信息 res 将调用jsdk 将文件信息res通过postMessage发回给小程序
        window.wx.miniProgram.postMessage({ data: res });
        // 如果使用过的npm 这里不需要加window
      })
    },
}
...

wxUploadFile文件（其实就是正常的文件上传）

export function wxUploadFile (data, onUploadProgress = null) {
  const url ='http.....'//这里web上传文件的地址
  return axios({
    url,
    method: 'post',
    data,
    onUploadProgress,
    timeout: 60000,
  })
}