小程序上傳圖片
阿新 • • 發佈:2018-02-09
file key parse mit log put down 完成 div
<!--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 () { } })
小程序上傳圖片