微信小程序之图片上传

在微信小程序中上传图片是很常见的功能

wxml:

<view class="head">
    <view class='fabu'  bindtap="submit">发布</view>
</view>
<textarea placeholder="编辑作业内容" class='nerong' bindinput='textInput'></textarea>

<view class="image" wx:for="{{imgs}}" wx:for-item="item" wx:key="*this"><!-- 图片预览 -->
  <image src="{{item}}" data-index="{{index}}" bindtap="previewImg"></image>
        <view class="deleteImage" data-index="{{index}}" catchtap="deleteImg"><!-- 图片删除 -->
            <image src='../../../../../image/cha.png' class='cha'></image>
        </view>
</view>
<view class='jiatupian'  bindtap="chooseImg" wx:if="{{plusShow}}" >
  <image src='../../../../../image/jia.png'></image>
</view>

wxss：

.head{
  width: 100%;
  height: 33px;

}

.fanhui{
  width: 61px;
  height: 24px;

  float: left;

  margin-top: 5px;
  margin-left:24px; 
}
.fanhui image{
  width: 24px;
  height: 24px;
  float: left;
}
.fanhui p{
  font-size: 16px;
  float: left;
 margin-bottom: 2px;
}
.fabu{
 width: 100px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  display: inline-block;
  color: white;
  font-weight: 900;
  background-color: #FE5454;
  float: right;
   font-size: 16px;
  margin-top: 5px;
  margin-right:24px;
}
.nerong{
  width: 90%;
  height:150px;
  font-size: 16px;

  margin-left: 5%;
  margin-top: 15px;
  overflow: auto;
}

.jiatupian{
  width: 60px;
  height: 60px;
  text-align: center;
 margin: 10px;

  border: rgb(223,223,223) 2px solid;
  float: left;
}
.jiatupian image{
  width: 80%;
  height: 80%;
  margin-top: 10%;
}

.image{
    width: 100%;
    height: auto;
}
.image image{
    width: 60px;
    height: 60px;
    line-height: 60px;
    margin:10px;
    float: left;
}
.deleteImage{
    width: 15px;
    height: 15px;
    font-size:15px;
    float: left;

}
.deleteImage image{
  width: 15px;
  height: 15px;
  line-height: 15px;
    margin:0px;
  margin-left: -10px;

}

js:

/*请求url*/
var urlData = require("../../../../../data/url.js");

 Page({
  data: {
    imgs: [],
    text: '',
    plusShow: true,
    courseId:1,
    userId:1,
    userRole:4

  },
  onLoad:function(e){
    //读出courseId
    wx.getStorage({
      key: "organHomeworkListConf",
      success: function (res) {
        that.setData({
          courseId: e.currentTarget.dataset.courseId
        });
      }
    });
    //读出login里的userId userRole
    wx.getStorage({
      key: "loginConf",
      success: function (res) {
        that.setData({
          userId: e.currentTarget.dataset.classid,
          userRole: e.currentTarget.dataset.role
        });
      }
    });
  },
  //获取文字内容
  textInput: function (e) {
    this.setData({
      text: e.detail.value
    });
  },
  //上传文字
  upLoadText: function () {
    var that = this;
    var imgs = this.data.imgs;
    wx.request({
      url: 'http://192.168.1.220:8000/courseWork/add/',
      data: {
        user_id: this.data.userId,
        role:this.data.userRole,
        course_id:this.data.courseId,
        work_content: this.data.text
      },
      header: { 'content-type': 'application/json' },
      success: function (res) {
        if (res.data.code == 0) {
          if(imgs.length>0){
            that.upLoadImg({//调用upLoadImg
              url: 'http://192.168.1.220:8000/courseWork/image/',//这里是你图片上传的接口
               imgs: imgs,
               coursework_id: res.data.coursework_id
            });
          }else{
            wx.redirectTo({
              url: '../organ-homework-teacherMore/organ-homework-teacherMore',
            })
          }
        }
      }
    })
  },
  chooseImg: function (e) {
    var that = this;
    var imgs = this.data.imgs;//存图片地址的变量
    wx.chooseImage({
      count: 9- imgs.length,
      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
      success: function (res) {
        // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
        var tempFilePaths = res.tempFilePaths;
        for (var i = 0; i < tempFilePaths.length; i++) {
          imgs.push(tempFilePaths[i]);
        }
        that.setData({
          imgs: imgs
        });
        that.showHide();
      }
    });
  },
    /*
        删除图片
    */
  deleteImg: function (e) {
    var imgs = this.data.imgs;
    var index = e.currentTarget.dataset.index;
    imgs.splice(index, 1);
    this.setData({
      imgs: imgs
    });
    this.showHide();
  },
    /*
        预览图片
    */
  previewImg: function (e) {
    //获取当前图片的下标
    var index = e.currentTarget.dataset.index;
    //所有图片
    var imgs = this.data.imgs;
    wx.previewImage({
      //当前显示图片
      current: imgs[index],
      //所有图片
      urls: imgs
    })
  },
    /*
        控制添加图片按钮是否显示出来
    */
  showHide: function (e) {
    if (this.data.imgs.length == 1) {
      this.setData({
        plusShow: false
      });
    } else if (this.data.imgs.length < 1) {
      this.setData({
        plusShow: true
      });
    }
  },
  /*提交*/
  submit: function (e) {
    this.upLoadText();

  },
  //上传图片
  upLoadImg:function (data) {
    var that = this,
      i = data.i ? data.i : 0,//当前上传的哪张图片
      success = data.success ? data.success : 0,//上传成功的个数
      fail = data.fail ? data.fail : 0;//上传失败的个数
    wx.uploadFile({
      url: data.url,
      filePath: data.imgs[i],
      name: 'file',
      formData: {
        id: data.id
      },
      success: (resp) => {
        success++;//图片上传成功，图片上传成功的变量+1
        console.log(resp);
        console.log(i);
        //这里可能有BUG，失败也会执行这里,所以这里应该是后台返回过来的状态码为成功时，这里的success才+1
      },
      fail: (res) => {
        fail++;//图片上传失败，图片上传失败的变量+1
        console.log('fail:' + i + "fail:" + fail);
      },
      complete: () => {
        console.log(i);
        i++;//这个图片执行完上传后，开始上传下一张
        if (i == data.imgs.length) {   //当图片传完时，停止调用          
          console.log('执行完毕');
          console.log('成功：' + success + " 失败：" + fail);
        } else {//若图片还没有传完，则继续调用函数
          console.log(i);
          data.i = i;
          data.success = success;
          data.fail = fail;
          that.a(data);
        }
      }
    });
  }
})