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