小程序上传图片

<!--pages/write/write.wxml-->
{{test}}
<form bindsubmit="submitArticle">
  <view class="writebox">
    <view class="form-item">
      <input maxlength="30" placeholder="输入标题" name="title" class="art-title" placeholder-class="inputHolder" bindfocus="titleFocus" bindblur="titleBlur" bindinput="titleInput" />
      <!-- <view class="icon-pen" wx:if="{{inputFocus}}" ></view> -->
      <text class="tips" wx:if="{{inputFocus}}">(30字内)</text>
    </view>
    <view class="form-item">
      <textarea placeholder="输入正文内容" name="content" class="art-con" maxlength="-1" placeholder-class="textareaHolder" />
    </view>
    <view class="form-item">
      <!-- 上传列表预览 -->
      <view class="upload-list" wx:for="{{imgList}}" wx:key="this">
        <image src="{{item}}"></image>
      </view>
      <view class="upload-icon" bindtap='chooseImgs'>
        <image src="upimg_icon.png"></image>
      </view>
    </view>
  </view>
  <button type="default" hover-class="none" form-type="submit" class="submit-btn">发布</button>
   <view class='explain'>
    <text>发布前请注意 :</text>
  </view>
</form>

　　

// pages/write/write.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    inputFocus: true,
    imgList: [],
  },
  /**
   * 获取焦点
   */
  titleFocus: function (e) {
    if (e.detail.value.length > 0) {
      this.setData({
        inputFocus: false
      })
    }
  },
  /**
   * 输入中
   */
  titleInput: function (e) {
    if (e.detail.value.length > 0) {
      this.setData({
        inputFocus: false
      })
    } else {
      this.setData({
        inputFocus: true
      })
    }
  },
  /**
   * 是去焦点
   */
  titleBlur: function (e) {
    if (e.detail.value.length > 0) {
      this.setData({
        inputFocus: false
      })
    } else {
      this.setData({
        inputFocus: true
      })
    }
  },
  /**
   * 选择图片
   */
  chooseImgs: function () {
    wx.chooseImage({
      sizeType: ['compressed'],
      sourceType: ['album', 'camera'],
      success: (res) => {
        this.setData({
          imgList: res.tempFilePaths
        });
      }
    })
  },
  uploadImgs: function (filePath, index, title,content,id) {
    let otherInfo = [];
    if (index + 1 == filePath.length){
      otherInfo.push(title,content,wx.getStorageSync('token'))
    }
    wx.uploadFile({
      url: '', 
      filePath: filePath[index],
      name: 'file',
      formData: {
        article_id : id
        // otherInfo:otherInfo
      },
      header: {
        'content-type': 'multipart/form-data'
      },
      success: (res)=> {
        console.log(JSON.parse(res.data));
        if (index + 1 < filePath.length) {
          this.uploadImgs(filePath, index + 1, title,content,id)
        } else {
          //图片全部提交了
          wx.hideLoading();
          wx.navigateTo({
            url: 'writesuccess?id='+id+'&title=' + title
          })
        }
      }
    })
  },

  /** 
   * 提交文章 
   * */
  submitArticle: function (e) {
    let title = e.detail.value.title;
    let content = e.detail.value.content;
    let cur = 0;
    let fileLength = this.data.imgList.length;
    if (title == "") {
      wx.showModal({
        title: '提示',
        content: '标题不能为空',
      })
    } else if (content.length < 10) {
      wx.showModal({
        title: '提示',
        content: '内容不能少于10个字',
      })
    } else if (fileLength == 0) {
      wx.showModal({
        title: '提示',
        content: '请添加图片'
      })
    } else {
      wx.showLoading({
        title: '提交中',
        mask: true
      });
      wx.request({
        url: '',
        method:'POST',
        data:{
          token:wx.getStorageSync('token'),
          title:title,
          content: content
        },
        success:(res) => {
          let {errcode,article_id} = res.data
          if(errcode == 0){
            this.uploadImgs(this.data.imgList, cur, title, content, article_id);
          }
        }
      })
    }
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
  
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})