小程序上传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%;
}
|
请发表评论