微信小程序上传一或多张图片

最新推荐文章于 2024-04-28 07:53:54 发布

奋斗年轻人

最新推荐文章于 2024-04-28 07:53:54 发布

阅读量1.4w

点赞数 1

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

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

95 篇文章 6 订阅

订阅专栏

微信小程序上传一或多张图片

一.要点

1.选取图片

       
       wx.chooseImage({
      sizeType: [],  // original 原图，compressed 压缩图，默认二者都有
      sourceType: [], // album 从相册选图，camera 使用相机，默认二者都有
      success: function (res) {
        console.log(res);
        var array = res.tempFilePaths, //图片的本地文件路径列表
      }
    })

2.上传图片

       
       wx.uploadFile({
      url: '', //开发者服务器的 url
      filePath: '', // 要上传文件资源的路径 String类型！！！
      name: 'uploadFile',  // 文件对应的 key ,(后台接口规定的关于图片的请求参数)
      header: {
        'content-type': 'multipart/form-data'
      }, // 设置请求的 header
      formData: {  }, // HTTP 请求中其他额外的参数
      success: function (res) {
      },
      fail: function (res) {
      }
    })

二.代码示例

       
       // 点击上传图片
upShopLogo: function () {
    var that = this;
    wx.showActionSheet({
      itemList: ['从相册中选择', '拍照'],
      itemColor: "#f7982a",
      success: function (res) {
        if (!res.cancel) {
          if (res.tapIndex == 0) {
            that.chooseWxImageShop('album')   
          } else if (res.tapIndex == 1) {
            that.chooseWxImageShop('camera')
          }
        }
      }
    })
  },
  chooseWxImageShop: function (type) {
    var that = this;
    wx.chooseImage({
      sizeType: ['original', 'compressed'],
      sourceType: [type],
      success: function (res) {
/*上传单张
        that.data.orderDetail.shopImage = res.tempFilePaths[0],
        that.upload_file(API_URL + 'shop/shopIcon', res.tempFilePaths[0])
*/
 /*上传多张（遍历数组，一次传一张）
        for (var index in res.tempFilePaths) {
             that.upload_file(API_URL + 'shop/shopImage', res.tempFilePaths[index])
        }
*/
      }
    })
  },
upload_file: function (url, filePath) {
    var that = this;
    wx.uploadFile({
      url: url,
      filePath: filePath,
      name: 'uploadFile',
      header: {
        'content-type': 'multipart/form-data'
      }, // 设置请求的 header
      formData: { 'shopId': wx.getStorageSync('shopId') }, // HTTP 请求中其他额外的 form data
      success: function (res) {
        wx.showToast({
              title: "图片修改成功",
              icon: 'success',
              duration: 700
            })
      },
      fail: function (res) {
      }
    })
  },

奋斗年轻人

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
10
评论
微信小程序上传一或多张图片

微信小程序上传一或多张图片一.要点1.选取图片wx.chooseImage({ sizeType: [], // original 原图，compressed 压缩图，默认二者都有 sourceType: [], // album 从相册选图，camera 使用相机，默认二者都有 success:
复制链接

扫一扫