微信小程序上传图片链接到MySQL数据库

我们首先要了解

调用微信的api来上传图片他会在本地缓存来生成一个图片链接

只能在你上传图片的设备打开

当你清缓存之后这个链接也就失效了

这个链接发给别人 别人看不到图片

相当于在同一网域局也“无”法打开

这时候我们要借助外力 例如引入vant Weapp组件库

这个 Vant Weapp - 轻量、可靠的小程序 UI 组件库

使用里面的组件来进行上传图片 下面是一个实例

新建的页面方便展示
 

wxml

​
<van-uploader deletable="{{ true }}"  bind:after-read="afterRead"/>

在json文件中吧下载的组件引入

"usingComponents": {
      "van-uploader": "@vant/weapp/uploader/index"
    
  },

js

  afterRead(event) {
    var thas=this
    const { file } = event.detail;
    console.log(file)
    // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
    wx.uploadFile({
      url: 'http://192.168.43.231:4444/upload/uploads', // 仅为示例，非真实的接口地址 这个就是我的mysql数据库地址 该成你自己的就好了
      filePath: file.url,
      name: 'file',
      formData: { user: 'test' },
      success(res) {
        // 请求的返回值 看你自己想做什么操作了
        console.log(JSON.parse(res.data).folderArr)
        let newfile=JSON.parse(res.data).folderArr
        //将返回的字符进行更改 改成你的ip地址
        let newMlift=newfile[0].replace("localhost", "192.168.43.231");
        //我这个添加到一个数组中了 你也可以先打印一下res再进行操作
        //thas.setData({
         // fileList:thas.data.fileList.concat(newMlift)
        //})
        //console.log(thas.data.fileList)
      },

    });
  },

这样就可以返回一个数据库形式的图片链接了