微信小程序wx.chooseImage选择图片并上传避坑/真机上传无效

本文介绍了微信小程序中使用wx.chooseImage选取图片及wx.uploadFile上传到服务器的步骤,并重点讨论了真机上图片上传无效的问题,原因是未在小程序后台设置uploadFile的合法域名,配置完成后问题得以解决。

微信小程序选择本地图片或者相机拍照并上传服务器需要用到以下两个方法:

1.wx.chooseImage(Object object)

从本地相册选择图片或使用相机拍照

2.wx.uploadFile(Object object)

将本地资源上传到服务器。客户端发起一个 HTTPS POST 请求,其中 content-type 为 multipart/form-data

chooseImg() {
    const that = this;
    wx.chooseImage({
      count: 6,
      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
      success (res) {
        // tempFilePath可以作为img标签的src属性显示图片
        const tempFilePaths = res.tempFilePaths
        for (let i = 0; i < tempFilePaths.length; i += 1) {
        wx.uploadFile({
           url: 'https://example.weixin.qq.com/upload', //仅为示例,非真实的接口地址
           filePath: tempFilePaths[i],
           name: 'file',
           header: {  // 我的 HTTP 请求中需要token,视情况而定是否需要header
             token: wx.getStorageSync('token') || '',
           },
           formData: { // HTTP 请求中其他额外的 form data
             file: tempFilePaths[i],
           },
           success (res){
             console.log(res);
             // 上传成功后相关操作
           },
           fail() {
             wx.showToast({
               title: '上传失败,请重试', //弹框内容
               icon: 'fail',  //弹框模式
               duration: 2000    //弹框显示时间
             })  
           },
         })
       }
     },
   })
 },

避坑:
在项目转测后,发现选择图片之后不显示,但是使用调式模式时,就能显示,后来发现是使用uploadFile方法前,需要在小程序后台配置uploadFile的合法域名,配完后即可正常选择图片上传

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值