微信小程序选择图片并上传图床

• 选择图片我们选择wx.chooseMedia，曾经的wx.chooseImage已经停止维护了，所以使用wx.chooseMedia 代替。
• 上传图片我们选择wx.uploadFile，这是最优的方案，如果使用wx.request会非常非常非常麻烦！
• 图床我这里以 Lsky 兰空图床为例，是在我自己的服务器上搭建的。

图床接口

wx.chooseMedia 的基本用法

wx.chooseMedia({
    count: 1,
    // 最多可以选择的图片张数，默认9
    sizeType: ['original', 'compressed'],
    // original 原图，compressed 压缩图，默认二者都有
    sourceType: ['album', 'camera'],
    // album 从相册选图，camera 使用相机，默认二者都有
    success: res => {
        const filePath = res.tempFiles[0].tempFilePath;	// 临时路径，下面要用
        console.log(filePath);
    }
})

wx.uploadFile 的基本用法

特别注意name这个配置项对应的是后端要求的参数名，对于我的图床来说就是file，因为图床api接受的参数名为file。

wx.uploadFile({
    filePath: temp_path,	// 上面的临时路径
    name: '后端要求的参数名',
    url: '接口的url',
    success: (res) => {
        console.log(res.data);
    },
    fail: () => {
        console.log("失败...");
    }
})

完整代码

//微信API选择图片
wx.chooseMedia({
    count: 1,
    // 最多可以选择的图片张数，默认9
    sizeType: ['original', 'compressed'],
    // original 原图，compressed 压缩图，默认二者都有
    sourceType: ['album', 'camera'],
    // album 从相册选图，camera 使用相机，默认二者都有
    success: res => {
        const filePath = res.tempFiles[0].tempFilePath;
        wx.uploadFile({
          filePath: pic_src,
          name: 'file',
          url: 'https://xxxxxxxxxxx/api/v1/upload',
          success: (res) => {
            const response = JSON.parse(res?.data)	// 注意返回的值是字符串，要转为对象
            if (!response?.status) {
              wx.showToast({
                title: '图片上传失败',
                icon: 'error',
                duration: 2000 //持续的时间
              })
            }
            console.log(response?.data?.links?.url);	// 取出返回来的真实图片地址
            that.setData({
              pic_url: response?.data?.links?.url
            })
          },
          fail: () => {
            console.log("失败...");
          }
        })
    }
})