微信小程序实现文件上传

本文主要是介绍微信小程序实现文件上传，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

uploads.wxml

<view class="picture">
    <text class='index-4'>上传带看截图： </text>
    <view class='proofimgs'>
      <view class='pick' bindtap="chooseImg">
        +
      </view>
      <view class="img" wx:for="{{imgs}}" wx:for-item="item" wx:key="*this">
        <image class='imgSelected' src="{{item}}" data-index="{{index}}" mode="aspectFill" bindtap='previewImg'></image>
        <image class='del' src='/images/null.jpg' data-index="{{index}}" catchtap="deleteImg"></image>
      </view>
    </view>
  </view>

　　uploads.wxss

.index-4 {
  margin-left: 85rpx;
  color: #fff;
  padding-top: 20rpx;
  display: block;
}
.proofimgs {
  margin-top: 20rpx;
  margin-left: 90rpx;
  width: 73%;
}
.pick {
  width: 150rpx;
  height: 150rpx;
  color: #fff;
  background: #000;
  text-align: center;
  opacity: 0.6;
  border-radius: 30rpx;
  font-size: 100rpx;
  font-weight: bold;
}
.img {
  display: flex;
  align-items: top;
  margin-top: 20rpx;
}
.imgSelected {
  width: 100%;
}
.del {
  width: 40rpx;
  height: 40rpx;
  margin-top: -20rpx;
  margin-left: -20rpx;
}

　　uploads.js

data: {
    index: 0,
    multiIndex: [0, 0],
    //传到后台的课程分类
    cname: '',
    imgs: [],
    proof: ''
  },
 //选择图片
 chooseImg: function(e) {
    var that = this;
    console.log(that);
    if (that.data.cname == '') {

    } else {
      var imgs = this.data.imgs;
      if (imgs.length >= 9) {
        this.setData({
          lenMore: 1
        });
        setTimeout(function() {
          that.setData({
            lenMore: 0
          });
        }, 2500);
        return false;
      }
    }

    wx.chooseImage({
      // count: 1, // 默认9
      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
      success: function(res) {
        // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
        var tempFilePaths = res.tempFilePaths;
        var imgs = that.data.imgs;
        console.log(res,5255);
        // console.log(tempFilePaths + '----');
        for (var i = 0; i < tempFilePaths.length; i++) {
          if (imgs.length >= 9) {
            that.setData({
              imgs: imgs
            });
            return false;
          } else {
            imgs.push(tempFilePaths[i]);
          }
        }
        // console.log(imgs);
        that.setData({
          imgs: imgs,
        });
        //循环把图片上传到服务器
        for (var i = 0; i < imgs.length; i++) {
          wx.uploadFile({
            url: '',
            filePath: imgs[i],
            name: 'files',
            formData: {
              cname: that.data.cname
            },
            success: function(res) {
              var hhsd = res.data.replace(/\"/g, "");
              that.data.proof = that.data.proof.concat(hhsd + ',');
              that.setData({
                proof: that.data.proof
              });
            }
          })
        }
      }
    });

  },

  // 删除图片
  deleteImg: function (e) {
    var imgs = this.data.imgs;
    var index = e.currentTarget.dataset.index;
    imgs.splice(index, 1);
    this.setData({
      imgs: imgs
    });
  },

  // 预览图片
  previewImg: function (e) {
    //获取当前图片的下标
    var index = e.currentTarget.dataset.index;
    //所有图片
    var imgs = this.data.imgs;
    wx.previewImage({
      //当前显示图片
      current: imgs[index],
      //所有图片
      urls: imgs
    })
  },

这篇关于微信小程序实现文件上传的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！