小程序上传图片

<!--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.jsPage({ ?/** ??* 页面的初始数据 ??*/ ?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 () { ?}})