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

╰半橙微兮° 2021-09-17 03:36 459阅读 0赞

## 小程序上传wx.uploadFile ##

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

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MjMyNjEx_size_16_color_FFFFFF_t_70]

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;
    
    }

上传图片:

> 上传文件

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)  
          }  
      });

小程序请假

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%;
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MjMyNjEx_size_16_color_FFFFFF_t_70]: /images/20210724/fec52eb3e6b14f8c8597e7b0d7811dbd.png