天天看点
返回

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

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

一.要点

1.选取图片

     
  1.  wx.chooseImage({            
    2.       
  2.  sizeType: [],  // original 原图，compressed 压缩图，默认二者都有            
    3.       
  3.  sourceType: [], // album 从相册选图，camera 使用相机，默认二者都有            
    4.       
  4.  success: function (res) {            
    5.       
  5.  console.log(res);            
    6.       
  6.  var array = res.tempFilePaths, //图片的本地文件路径列表            
    7.       
  7.  }            
    8.       
  8.  })            
    9.
2.上传图片 
     
  1.  wx.uploadFile({            
    2.       
  2.  url: '', //开发者服务器的 url            
    3.       
  3.  filePath: '', // 要上传文件资源的路径 String类型！！！            
    4.       
  4.  name: 'uploadFile',  // 文件对应的 key ,(后台接口规定的关于图片的请求参数)            
    5.       
  5.  header: {            
    6.       
  6.  'content-type': 'multipart/form-data'            
    7.       
  7.  }, // 设置请求的 header            
    8.       
  8.  formData: {  }, // HTTP 请求中其他额外的参数            
    9.       
  9.  success: function (res) {            
    10.       
  10.  },            
    11.       
  11.  fail: function (res) {            
    12.       
  12.  }            
    13.       
  13.  })            
    14.
二.代码示例 
     
  1.  // 点击上传图片            
    2.       
  2.  upShopLogo: function () {            
    3.       
  3.  var that = this;            
    4.       
  4.  wx.showActionSheet({            
    5.       
  5.  itemList: ['从相册中选择', '拍照'],            
    6.       
  6.  itemColor: "#f7982a",            
    7.       
  7.  success: function (res) {            
    8.       
  8.  if (!res.cancel) {            
    9.       
  9.  if (res.tapIndex == 0) {            
    10.       
  10.  that.chooseWxImageShop('album')               
    11.       
  11.  } else if (res.tapIndex == 1) {            
    12.       
  12.  that.chooseWxImageShop('camera')            
    13.       
  13.  }            
    14.       
  14.  }            
    15.       
  15.  }            
    16.       
  16.  })            
    17.       
  17.  },            
    18.       
  18.  chooseWxImageShop: function (type) {            
    19.       
  19.  var that = this;            
    20.       
  20.  wx.chooseImage({            
    21.       
  21.  sizeType: ['original', 'compressed'],            
    22.       
  22.  sourceType: [type],            
    23.       
  23.  success: function (res) {            
    24.       
  24.   
    25.       
  25.  /*上传单张            
    26.       
  26.  that.data.orderDetail.shopImage = res.tempFilePaths[0],            
    27.       
  27.  that.upload_file(API_URL + 'shop/shopIcon', res.tempFilePaths[0])            
    28.       
  28.  */            
    29.       
  29.   
    30.       
  30.  /*上传多张（遍历数组，一次传一张）            
    31.       
  31.  for (var index in res.tempFilePaths) {            
    32.       
  32.  that.upload_file(API_URL + 'shop/shopImage', res.tempFilePaths[index])            
    33.       
  33.  }            
    34.       
  34.  */            
    35.       
  35.  }            
    36.       
  36.  })            
    37.       
  37.  },            
    38.       
  38.  upload_file: function (url, filePath) {            
    39.       
  39.  var that = this;            
    40.       
  40.  wx.uploadFile({            
    41.       
  41.  url: url,            
    42.       
  42.  filePath: filePath,            
    43.       
  43.  name: 'uploadFile',            
    44.       
  44.  header: {            
    45.       
  45.  'content-type': 'multipart/form-data'            
    46.       
  46.  }, // 设置请求的 header            
    47.       
  47.  formData: { 'shopId': wx.getStorageSync('shopId') }, // HTTP 请求中其他额外的 form data            
    48.       
  48.  success: function (res) {            
    49.       
  49.  wx.showToast({            
    50.       
  50.  title: "图片修改成功",            
    51.       
  51.  icon: 'success',            
    52.       
  52.  duration: 700            
    53.       
  53.  })            
    54.       
  54.  },            
    55.       
  55.  fail: function (res) {            
    56.       
  56.  }            
    57.       
  57.  })            
    58.       
  58.  },            
    59.
微信小程序
上一篇: 联想y7000p电池固件下载_刚读大学要用电脑，联想系列这3款笔记本学生党绝对喜欢...
下一篇: 微信小程序上传图片（可多张）

继续阅读