小程序上传wx.uploadFile-小程序请假-请求

OGeek|极客世界-中国程序员成长平台 › 门户 › 编程› 移动开发›小程序云开发高级教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

小程序上传wx.uploadFile

UploadTask wx.uploadFile(Object object)
将本地资源上传到服务器。客户端发起一个 HTTPS POST 请求，其中 content-type 为 multipart/form-data。使用前请注意阅读相关说明。

num=1;当num==3时，设置按钮隐藏
直接上代码：

<view class='uploader' wx:for="{{files}}" wx:key="{{index}}">
  <image src='../../img/cha.png' class='cha' catchtap='delete' data-index="{{index}}"></image>
  <image src='{{item}}' class='upload-img'></image>
</view>
<view class='uploader' wx:if="{{upload}}" bindtap="previewImage">
  <view class='uploader-content'>
    <view class='add-icon'>+</view>
    <view class='title'>添加图片</view>
  </view>
</view>
  <button bindtap='delete'>删除</button>

Page({

  /**
   * 页面的初始数据
   */
  data: {
    upload: true,
    files: [],
    sum: 0,
  },
  //  上传图片
  previewImage: function() {
    wx.chooseImage({
      count: 1,
      sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
      success: (res) => {
        console.log(res) // 打印输出返回值
        let files = this.data.files
        files.push(res.tempFilePaths[0]) // 把图片地址push到数组中
        let sum = this.data.sum
        sum++ // 开始计数
        this.setData({
          sum: sum
        })
        if (this.data.sum == 3) { // 如果sum==3隐藏上传按钮
          this.setData({
            upload: false
          })
        }
        // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
        this.setData({
          files: files
        });

      }
    })
  },

  // 删除图片
  delete: function(e) {
    let index = e.currentTarget.dataset.index
    let files = this.data.files
    files.splice(index, 1)
    this.setData({
      files: files
    })
    if (this.data.files.length == 0) {
      this.setData({
        upload: true,
        sum: 0
      })
    }
  }
})

.uploader{
position: relative;
width: 175rpx;
height: 175rpx;
background: #F0F0F2;
margin-top:50rpx;
border-radius:10rpx;
float: left;
margin-right:20rpx;
}
.add-icon{
position: absolute;
font-size:105rpx;
top:-23rpx;
left:50rpx;
color: #A3A3A3;
}
.title{
position:absolute;
bottom:30rpx;
left:32rpx;
color:#A3A3A3;
font-size:31rpx;

}
.upload-img{
width: 100%;
height: 100%;
border-radius: 8rpx;
}
.cha{
z-index:3;
width:30rpx;
height:30rpx;
position:absolute;
right:0;

}

上传图片:

<form bindsubmit="formSubmit" id='2' bindreset="formReset">  
<input style='display:none' name='program_id' value='{{program_id}}'></input>  
      <view class='caigou_centent'>描述说明(选填)</view>  
      <textarea class='textarea' placeholder="" name="content" value='{{formdata}}' />  
  
      <view class="big-logos">  
        <image bindtap="upimg" src='../../images/jia.png'></image>  
        <block wx:for="{{img_arr}}">  
          <view class='logoinfo'>  
            <image src='{{item}}'></image>  
          </view>  
        </block>  
      </view>  
      <button class='btn' formType="submit">发布</button>  
</form>

var adds = {};  
Page({  
  data: {  
img_arr: [],  
formdata: '',  
},  
  formSubmit: function (e) {  
    var id = e.target.id  
    adds = e.detail.value;   
    adds.program_id = app.jtappid  
    adds.openid = app._openid  
    adds.zx_info_id = this.data.zx_info_id  
    this.upload()  
  },  
  
  upload: function () {  
    var that = this  
      for (var i=0; i < this.data.img_arr.length; i++) {  
        wx.uploadFile({  
          url: 'https:***/submit',  
          filePath: that.data.img_arr[i],  
          name: 'content',  
          formData: adds,   
          success: function (res) {  
            console.log(res)  
            if (res) {  
              wx.showToast({  
                title: '已提交发布！',  
                duration: 3000  
              });  
            }  
          }  
        })  
      }  
      this.setData({  
        formdata: ''  
      })  
  },  
  upimg: function () {  
    var that = this;  
    if (this.data.img_arr.length<3){  
    wx.chooseImage({  
      sizeType: ['original', 'compressed'],  
      success: function (res) {  
        that.setData({  
          img_arr: that.data.img_arr.concat(res.tempFilePaths)  
        })  
      }  
    })  
    }else{  
      wx.showToast({  
        title: '最多上传三张图片',  
        icon: 'loading',  
        duration: 3000  
      });  
    }  
  },  
  })

上传文件

<button bindtap="upload">上传文件</button>

Page({
  data: {
    path: ''
  },
  upload: function() {
    var that = this
    wx.chooseImage({
      count: 1,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success: function(res) {
        var tempFilePaths = res.tempFilePaths
        console.log(tempFilePaths)
        wx.uploadFile({
          url: 'http://example.weixin.qq.com/upload',
          filePath: tempFilePaths[0],
          name: 'file',
          formData: {
            'user': 'test'
          },
          success: function(res) {
            var data = res.data
            wx.showModal({
              title: '上传文件返回状态',
              content: '成功',
              success: function(res) {
                if (res.confirm) {
                  console.log('用户点击确定')
                }
              }
            }) //do something
          },
          fail: function(res) {
            console.log(res)
          }
        })
        that.setData({
          path: tempFilePaths
        })
      }
    })
  }
})

url string
开发者服务器地址

filePath string
要上传文件资源的路径

name string
文件对应的 key，开发者在服务端可以通过这个 key 获取文件的二进制内容

header
HTTP 请求 Header，Header 中不能设置 Referer

formData
HTTP 请求中其他额外的 form data

success
接口调用成功的回调函数

fail接口调用失败的回调函数

complete
接口调用结束的回调函数（调用成功、失败都会执行）

示例代码
wx.chooseImage({
  success (res) {
    const tempFilePaths = res.tempFilePaths
    wx.uploadFile({
      url: 'https://example.weixin.qq.com/upload', //仅为示例，非真实的接口地址
      filePath: tempFilePaths[0],
      name: 'file',
      formData: {
        'user': 'test'
      },
      success (res){
        const data = res.data
        //do something
      }
    })
  }
})

GET请求

wx.request({  
    url: 'https://URL',  //这里''里面填写你的服务器API接口的路径  
    data: {},  //这里是可以填写服务器需要的参数  
    method: 'GET', // 声明GET请求  
    // header: {}, // 设置请求的 header，GET请求可以不填  
    success: function(res){  
console.log("返回成功的数据:" + res.data ) //返回的会是对象，可以用JSON转字符串打印出来方便查看数据  
console.log("返回成功的数据:"+ JSON.stringify(res.data)) //这样就可以愉快的看到后台的数据啦  
    },  
    fail: function(fail) {  
      // 这里是失败的回调，取值方法同上,把res改一下就行了  
    },  
    complete: function(arr) {  
      // 这里是请求以后返回的所以信息，请求方法同上，把res改一下就行了  
    }  
  })

POST请求

   var that = this //创建一个名为that的变量来保存this当前的值  
   wx.request({  
      url: '',  
      method: 'post',  
      data: {  
        openid: 'openid'  //这里是发送给服务器的参数（参数名：参数值）  
      },  
      header: {  
        'content-type': 'application/x-www-form-urlencoded'  //这里注意POST请求content-type是小写，大写会报错  
      },  
      success: function (res) {  
        that.setData({ //这里是修改data的值  
          test: res.data //test等于服务器返回来的数据  
        });  
        console.log(res.data)  
      }  
  });

小程序请假

<view class="head">
  <view class="head_item {{selected?'head_itemActive':''}}" bindtap="selected">新请假</view>
  <view class="ring"></view>
  <view class="head_item {{selected1?'head_itemActive':''}}" bindtap='selected1'>请假结果</view>
</view>
<view class="main {{selected?'show':'hidden'}}">
  <form bindsubmit="formSubmit" bindreset="formReset">
    <view class='item'>
      \r\n\r\n\r\n\r\n\r\n\r\n年级：
      <view class='bk'>
        <input name='nickname' class="textarea" placeholder="{{geren.nickname}}" value='{{geren.nickname}}' bindinput="nickname" maxlength='15' auto-height/>
      </view>
    </view>
    <view class='item'>
      \r\n\r\n\r\n\r\n\r\n\r\n班级：
      <view class='bk'>
        <input name='nickname' class="textarea" placeholder="{{geren.nickname}}" value='{{geren.nickname}}' bindinput="nickname" maxlength='15' auto-height/>
      </view>
    </view>
    <view class='item'>
      \r\n\r\n\r\n\r\n\r\n\r\n学号：
      <view class='bk'>
        <input name='realName' class="textarea" placeholder="{{detailgeren.realName}}" value='{{detailgeren.realName}}' bindinput="realName" maxlength='15' auto-height/>
      </view>
    </view>
    <view class='item'>
      申请姓名：
      <view class='bk'>
        <input name='realName' class="textarea" placeholder="{{detailgeren.realName}}" value='{{detailgeren.realName}}' bindinput="realName" maxlength='15' auto-height/>
      </view>
    </view>
    <view class='item'>
      请假天数：
      <view class='bk'>
        <input name='realName' class="textarea" placeholder="{{detailgeren.realName}}" value='{{detailgeren.realName}}' bindinput="realName" maxlength='15' auto-height/>
      </view>
    </view>
    <view class='item'>
      开始时间：
      <view class='bk'>
        <view class='time'>
          <picker mode="date" value="{{date}}" start="2018-01-01" end="2222-10-08" bindchange="changeDate" name="starttime" bindchange="changeDate">
            <view>
              {{date}}
            </view>
          </picker>
        </view>
      </view>
    </view>
    <view class='item'>
      结束时间：
      <view class='bk'>
        <view class='time'>
          <picker mode="date" value="{{date1}}" start="2018-11-11" end="2222-01-01" bindchange="changeDate1" name="endtime">
            <view>
              {{date1}}
            </view>
          </picker>
        </view>
      </view>
    </view>
    <view class='item'>
      请假类型：
      <view class='bk'>
        <input name='realName' class="textarea" placeholder="{{detailgeren.realName}}" value='{{detailgeren.realName}}' bindinput="realName" maxlength='15' auto-height/>
      </view>
    </view>
    <view class='item'>
      请假原因：
      <view class='bk'>
        <input name="detailAddress" class="textarea" placeholder="{{detailgeren.detailAddress}}" value='{{detailgeren.detailAddress}}' bindinput="detailAddress" maxlength='100' auto-height/>
      </view>
    </view>
    <view class='anniu'>
      <button class='btn' formType="submit">提交</button>
    </view>
  </form>
</view>

Page {
  background-color: #f1f1f1;
}


/* 新请假 */

.item {
  display: flex;
  flex-direction: row;
  font-size: 30rpx;
  color: #acacac;
  margin: 25rpx;
  align-items: center;
}

.btn {
  background-color: #79caff;
  color: #fff;
  width: 150rpx;
  font-size: 30rpx;
  margin-top: 30rpx;
}

.bk {
  border-radius: 10rpx;
  border: 2rpx solid #ccc;
  padding: 10rpx;
  width: 65%;
}

.textarea {
  width: 100%;
}