小程序上传wx.uploadFile - 小程序请假-请求
小程序上传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%;
}
小程序上传wx.uploadFile - 小程序请假-请求的更多相关文章
- 小程序上传wx.uploadFile - 小程序请假
小程序上传wx.uploadFile UploadTask wx.uploadFile(Object object) 将本地资源上传到服务器.客户端发起一个 HTTPS POST 请求,其中 cont ...
- 微信小程序开发,上传wx.uploadFile 返回参数处理
这真的是个坑,前端看了半天,说是字符串,让后台处理,后台说返回的是正确的,原来这个请求就是返回的string类型,见下图,无法取到code,需要前台自己转化. 以下为百度出来的参考: wx.reque ...
- 微信小程序上传Word文档、PDF、图片等文件
<view class="main" style="border:none"> <view class="title"&g ...
- [iOS 多线程 & 网络 - 2.5] - 小文件上传
A.文件上传 思路: 发送文件数据给服务器 使用post请求 必须手动设置请求头: 内容大小Content-Length & 内容类型 Content-Type 请求体:文件数据 文件上传的格 ...
- iOS多线程与网络开发之小文件上传
郝萌主倾心贡献,尊重作者的劳动成果,请勿转载. /** 取得本地文件的MIMEType */ 2 - (void) getMIMEType { 3 // Socket 实现断点上传 4 5 //apa ...
- 微信小程序上传与下载文件
需要准备的工作: ①.建立微信小程序工程,编写以下代码. ②.通过IDE建立springboot+web工程,编写接收文件以及提供下载文件的方式,并将上传的文件相关信息记录在mysql数据库中.具体请 ...
- 微信小程序上传Excel文本文件功能
问题: 在开发过程中会发现微信小程序有很多功能都还不能满足我们的需求,谁叫客户就是上帝呢,前几天小编遇到了这么个问题,就是用微信小程序上传文件,但是还以为微信带有这个模块,可是查了许久还是没有找到,只 ...
- 小程序上传多图片多附件多视频 c#后端
前言: 最近在研究微信小程序,本人自己是C#写后端的;感觉小程序挺好玩的,就自己研究了一下:刚好今天又给我需求,通过小程序上传多图 然后C#后端保存到服务器: 用NET明白 前端上传需要用到流,然后就 ...
- 微信小程序上传多张图片,及php后台处理
微信小程序上传多张图片,级小程序页面布局直接来代码index.wxml <view class='body' style='width:{{windowWidth}}px;height:{{wi ...
随机推荐
- Go语言流程控制中的break,continue和goto(七)
break(跳出循环) break用于跳出整个循环,如下: func main() { ;i<;i++{ { break } fmt.Println(i) } } // 0 1 2 3 代码里只 ...
- std::tr1::function和bind组件
C++中std::tr1::function和bind 组件的使用 在C++的TR1中(Technology Report)中包含一个function模板类和bind模板函数,使用它们可以实现类似函数 ...
- Django基础之jQuery操作
Django基础之jQuery操作 jquery之cookie操作 定义:让网站服务器把少量数据储存到客户端的硬盘或内存,从客户端的硬盘读取数据的一种技术: 下载与引入:jquery.cookie.j ...
- CSS(下)
目录 CSS(下) CSS属性相关 宽和高 字体属性 背景属性 边框 border-radius display属性 CSS盒子模型 margin外边距 padding内填充 浮动(float) 限制 ...
- 部署Dashboard,监控应用
部署web UI(dashboard)用于监控node资源 参见文档:https://blog.csdn.net/networken/article/details/85607593 官网:https ...
- JavaScript斑马线表格制作
//实现斑马线表格 //方法1: document.write('<table border="1">'); for(var i=1; i<11; i++){ i ...
- 如何在万亿级别规模的数据量上使用Spark
一.前言 Spark作为大数据计算引擎,凭借其快速.稳定.简易等特点,快速的占领了大数据计算的领域.本文主要为作者在搭建使用计算平台的过程中,对于Spark的理解,希望能给读者一些学习的思路.文章内容 ...
- 基于Zabbix 3.2.6版本的low-level-discover(lld)
个人使用理解: 1.使用一个返回值是JSON的KEY,在Templates或者Hosts中创建一个Discovery规则.该key的返回值类似于: 索引key -- value 类型 ...
- SAP中MM模块基础数据之Quota Arrangement(配额协议)的解析
有的时候我们的采购部门有这样的需求, 同一颗物料有几个供应商同时供料, 这个时候就涉及到一个问题, 避免出现总是和一家供应商购买物料的情况,我们需求把这些物料按照一定的比列分配给供应商.在SAP系统中 ...
- typedef 返回类型(*Function)(参数表) ——typedef函数指针
//首先看一下函数指针怎么用 #include <iostream> using namespace std; //定义一个函数指针pFUN,它指向一个返回类型为char,有一个整型的参数 ...