小程序上传wx.uploadFile - 小程序请假-请求
小程序上传wx.uploadFile
UploadTask wx.uploadFile(Object object)
将本地资源上传到服务器。客户端发起一个 HTTPS POST 请求，其中 content-type 为 multipart/form-data。使用前请注意阅读相关说明。
num=1;当num==3时，设置按钮隐藏
直接上代码：
+
添加图片
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;
}
上传图片:
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
});
}
},
})
上传文件
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%;
}