分享好友 编程语言首页 频道列表

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

小程序文章/教程  2023-03-08 13:260

小程序上传wx.uploadFile

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

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

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

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

查看更多关于【小程序文章/教程】的文章

展开全文
相关推荐
反对 0
举报 0
评论 0
图文资讯
热门推荐
优选好物
更多热点专题
更多推荐文章
小程序 AI/AR 能力
一、关于 VisionKit1、定义VisionKit 为小程序提供了开发 AR 功能的能力，包含了 AR 在内的视觉算法。2、版本提供了 V1 和 V2 两个版本，区别如下：V1平面接口，适用于用户在平面场景下，例如桌面，地面，泛平面场景，放置虚拟物体，不提供真实世界距离。用户

0评论2023-03-08842

Python小程序——快排算法 快排 python
1 def Partition(list,p,q): 2 #这里是用来分块的算法。 3 x = list[p] 4 i = p 5 for j in range(p+1,q+1): #注意range是顾前不顾后的，所以后面的区间值要大一位 6 if list[j]x: 7 i+=1 8 list[i],list[j] = list[j],list[i] 9 10 list[p], list[i] = list[

0评论2023-02-09351

c++第一个小程序 第一个小程序是什么
 #include iostreamusing namespace std;int main(){const int SIZE=50;//定义大小。char name[SIZE]; cout"please input you name!\n"; //提示cinname;//输入cout"hello world:"nameendl; //输出return 0;}   #include iostreamusing namespace std;int m

0评论2023-02-09579

微信小程序 错误记录
1、报错this.getUserInfo(this.setData) is not a function;at pages/index/index onShow function;at api request success callback functionTypeError: this.getUserInfo is not a function在回调结果里调用这个页面的函数 this.fun() 或者 this.setData 时

0评论2023-02-09477

【小程序】添加tabBar后navigateTo失效
某页面.js//事件处理函数bindViewTap() {wx.navigateTo({url: '../logs/logs',})}, app.json"tabBar": {"backgroundColor": "black","color":"white","list": [{"pagePath": "pages/index/inde

0评论2023-02-09474

小程序组件之间的通信 小程序子父子组件通信
前言：其实之前就想写这个的，因为我觉得这么模块化的框架，组件之间通信是非常重要的，也是最经常用到的一块儿，只是之前在项目里一直没用到跨组件通信，现在用到了，也会用了，就一起写出来得了 :） 一、父、子组件之间的通信注：首先我们先将子组件在父组

0评论2023-02-09452

微信小程序左右滑动切换页面示例代码--转载
微信小程序——左右滑动切换页面事件微信小程序的左右滑动触屏事件，主要有三个事件：touchstart，touchmove，touchend。这三个事件最重要的属性是pageX和pageY，表示X，Y坐标。touchstart在触摸开始时触发事件;touchend在触摸结束时触发事件;touchmove触摸的

0评论2023-02-09564

让vue用于小程序setData方法
setData:function(obj){let that = this;let keys = [];let val,data;Object.keys(obj).forEach(function(key){keys = key.split('.');val = obj[key];data = that.$data;keys.forEach(function(key2,index){if(index+1 == keys.length){that.$set(data,key2,

0评论2023-02-09891

微信小程序 canvas导出图片模糊
//保存到手机相册save:function () {wx.canvasToTempFilePath({x: 0,y: 0,width: 375, //导出图片的宽height: 680, //导出图片的高destWidth: 375 * 750 / wx.getSystemInfoSync().windowWidth, //绘制canvas的时候用的是px， 这里换算成rpx ，导出后非常清晰

0评论2023-02-09339

微信小程序hidden问题 微信小程序隐藏view
    context.fillText('Hello World', 20, 380);                wx.drawCanvas({                    canvasId: '2',                    actions: context.getActions()                });       

0评论2023-02-09905

小程序***滑动的表格 小程序实现左右滑动
// pages/test/test.jsPage({/** * 页面的初始数据 */data: {headerList: [{name: '表头一',number: 'A201',type: "标准间"}, {name: '表头二',number: 'A202',type: "大床"}, {name: '表头三',number: 'A203',t

0评论2023-02-09530

微信小程序实现图片双滑缩放大小 微信小程序图片点击放大
在做小程序开发的过程中，后端传来一张图片地图，需要实现双手指滑动，使图片缩放，最终得出了一下代码：  js ：Page({data: {touch: {distance: 0,scale: 1,baseWidth: null,baseHeight: null,scaleWidth: null,scaleHeight: null}},touchStartHandle(e) {/

0评论2023-02-09697

更多推荐