<!--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 () {

  }
})

小程序上傳圖片