微信小程序 -- 图片上传

微信小程序图片上传

老方法，复制粘贴就好使

1. 如果同一个页面有多个地方使用图片上传，这五个方法名：记得不要重名

方法名	备注
commodity	图片预览的名称
previewImage_commodity_video	预览图片的方法名
deleteImage_video	删除图片的方法名
chooseImage_commodity_video	上传图片的方法名
storefront_video	调用上传图片接口的方法名

WXML代码：

<text class="name_font name">图片<text>:</text></text>
<view class="img name">
  <view class="list_tupian weui-uploader__bd"  bindtap="upimg_men">
    <block wx:for="{
     {commodity}}" wx:key="*this">
      <view class="weui-uploader__file" bindtap="previewImage_commodity_video" catchtap="deleteImage_video" data-index="{
     {index}}" id="{
     {item}}">
          <image class="weui-uploader__img" src="{
     {item}}" mode="aspectFill" />
      </view>
    </block>
    <view class="weui-uploader__input-box">
      <view class="weui-uploader__input" bindtap="chooseImage_commodity_video"></view>
    </view>
  </view>
</view>

<!-- 确定上传 -->
<view class="button" bindtap="queding">确定上传</view>

JS代码：

Page({
     
  /**
   * 页面的初始数据
   */
  data: {
     
    commodity:[], //图片
  },

  // 上传图片 Begin ###########################################
  //商品展示----上传图片
  chooseImage_commodity_video: function (e) {
     
    var that = this;
    wx.chooseImage({
     
      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
      success: function (res) {
     
        // 返回选定照片的本地文件路径列表，tempFilePaths可以作为img标签的src属性显示图片
        console.log(res);
        var commodity = that.data.commodity.concat(res.tempFilePaths);
        if (commodity.length > 1) {
     
          wx.showToast({
     
            title: '最多上传1个',
            image: "../../../images/cha.png"
          })
          return false;
        }
        that.setData({
     
          imagesurl_video:res.tempFilePaths
        })
        that.setData({
     
          commodity: commodity
        });
        that.storefront_video(commodity, 0, 0, 0, commodity.length)
      }
    })
  },
  //预览图片
  previewImage_commodity_video: function (e) {
     
    wx.previewImage({
     
      current: e.currentTarget.id, // 当前显示图片的http链接
      urls: this.data.ying // 需要预览的图片http链接列表
    })
  },
  //商品添加---上传图片函数
  storefront_video(filePaths, successUp, failUp, i, length) {
     
    var imgs;
    wx.uploadFile({
     
      url: 'https://www.XXXXXX.com/uploadimgs', // 写你的图片上传接口
      filePath: filePaths[i],
      name: 'file',
      success: (res) => {
     
        successUp++;
        var data = res.data;
        // 把获取到的路径存入imagesurl_video字符串中
        imgs = [data]
        console.log(imgs)
        var url = 'imagesurl_video[' + i + ']'
        this.setData({
     
          [url]: imgs
        })
      },
      fail: (res) => {
     
        failUp++;
      },
      complete: () => {
     
        i++;
        console.log(i)
        console.log(length)
        if (i == length) {
     
          //Toast('总共' + successUp + '张上传成功,' + failUp + '张上传失败！');
        } else {
      //递归调用uploadDIY函数
          this.storefront_video(filePaths, successUp, failUp, i, length);
        }
      },
    });
    console.log(this.data.imagesurl_video)
  },
  //上传图片删除
  deleteImage_video: function (e) {
     
    var that = this;
    var images = that.data.commodity;
    var index = e.currentTarget.dataset.index; //获取当前长按图片下标
    wx.showModal({
     
      content: '确定要删除此图片吗？',
      success: function (res) {
     
        if (res.confirm) {
     
          images.splice(index, 1);
        } else if (res.cancel) {
     
          return false;
        }
        that.setData({
     
          commodity: images
        });
      }
    })
  },
  // 上传图片 End #############################################################


  //确定上传
  queding:function(){
     
    var xiangqing_img = this.data.imagesurl_video
    console.log("这是图片链接" + xiangqing_img)
  },

})