//弹出
https://blog.csdn.net/qq_30641447/article/details/80225671
wxml:
<view class="head">
<view class='fabu' bindtap="submit">发布</view>
</view>
<textarea placeholder="编辑作业内容" class='nerong' bindinput='textInput'></textarea>
<view class="image" wx:for="{{imgs}}" wx:for-item="item" wx:key="*this"><!-- 图片预览 -->
<image src="{{item}}" data-index="{{index}}" bindtap="previewImg"></image>
<view class="deleteImage" data-index="{{index}}" catchtap="deleteImg"><!-- 图片删除 -->
<image src='../../../../../image/cha.png' class='cha'></image>
</view>
</view>
<view class='jiatupian' bindtap="chooseImg" wx:if="{{plusShow}}" >
<image src='../../../../../image/jia.png'></image>
</view>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
wxss:
.head{
width: 100%;
height: 33px;
}
.fanhui{
width: 61px;
height: 24px;
float: left;
margin-top: 5px;
margin-left:24px;
}
.fanhui image{
width: 24px;
height: 24px;
float: left;
}
.fanhui p{
font-size: 16px;
float: left;
margin-bottom: 2px;
}
.fabu{
width: 100px;
height: 30px;
text-align: center;
line-height: 30px;
display: inline-block;
color: white;
font-weight: 900;
background-color: #FE5454;
float: right;
font-size: 16px;
margin-top: 5px;
margin-right:24px;
}
.nerong{
width: 90%;
height:150px;
font-size: 16px;
margin-left: 5%;
margin-top: 15px;
overflow: auto;
}
.jiatupian{
width: 60px;
height: 60px;
text-align: center;
margin: 10px;
border: rgb(223,223,223) 2px solid;
float: left;
}
.jiatupian image{
width: 80%;
height: 80%;
margin-top: 10%;
}
.image{
width: 100%;
height: auto;
}
.image image{
width: 60px;
height: 60px;
line-height: 60px;
margin:10px;
float: left;
}
.deleteImage{
width: 15px;
height: 15px;
font-size:15px;
float: left;
}
.deleteImage image{
width: 15px;
height: 15px;
line-height: 15px;
margin:0px;
margin-left: -10px;
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
js:
/*请求url*/
var urlData = require("../../../../../data/url.js");
Page({
data: {
imgs: [],
text: '',
plusShow: true,
courseId:1,
userId:1,
userRole:4
},
onLoad:function(e){
//读出courseId
wx.getStorage({
key: "organHomeworkListConf",
success: function (res) {
that.setData({
courseId: e.currentTarget.dataset.courseId
});
}
});
//读出login里的userId userRole
wx.getStorage({
key: "loginConf",
success: function (res) {
that.setData({
userId: e.currentTarget.dataset.classid,
userRole: e.currentTarget.dataset.role
});
}
});
},
//获取文字内容
textInput: function (e) {
this.setData({
text: e.detail.value
});
},
//上传文字
upLoadText: function () {
var that = this;
var imgs = this.data.imgs;
wx.request({
url: 'http://192.168.1.220:8000/courseWork/add/',
data: {
user_id: this.data.userId,
role:this.data.userRole,
course_id:this.data.courseId,
work_content: this.data.text
},
header: { 'content-type': 'application/json' },
success: function (res) {
if (res.data.code == 0) {
if(imgs.length>0){
that.upLoadImg({//调用upLoadImg
url: 'http://192.168.1.220:8000/courseWork/image/',//这里是你图片上传的接口
imgs: imgs,
coursework_id: res.data.coursework_id
});
}else{
wx.redirectTo({
url: '../organ-homework-teacherMore/organ-homework-teacherMore',
})
}
}
}
})
},
chooseImg: function (e) {
var that = this;
var imgs = this.data.imgs;//存图片地址的变量
wx.chooseImage({
count: 9- imgs.length,
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
success: function (res) {
// 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
var tempFilePaths = res.tempFilePaths;
for (var i = 0; i < tempFilePaths.length; i++) {
imgs.push(tempFilePaths[i]);
}
that.setData({
imgs: imgs
});
that.showHide();
}
});
},
/*
删除图片
*/
deleteImg: function (e) {
var imgs = this.data.imgs;
var index = e.currentTarget.dataset.index;
imgs.splice(index, 1);
this.setData({
imgs: imgs
});
this.showHide();
},
/*
预览图片
*/
previewImg: function (e) {
//获取当前图片的下标
var index = e.currentTarget.dataset.index;
//所有图片
var imgs = this.data.imgs;
wx.previewImage({
//当前显示图片
current: imgs[index],
//所有图片
urls: imgs
})
},
/*
控制添加图片按钮是否显示出来
*/
showHide: function (e) {
if (this.data.imgs.length == 1) {
this.setData({
plusShow: false
});
} else if (this.data.imgs.length < 1) {
this.setData({
plusShow: true
});
}
},
/*提交*/
submit: function (e) {
this.upLoadText();
},
//上传图片
upLoadImg:function (data) {
var that = this,
i = data.i ? data.i : 0,//当前上传的哪张图片
success = data.success ? data.success : 0,//上传成功的个数
fail = data.fail ? data.fail : 0;//上传失败的个数
wx.uploadFile({
url: data.url,
filePath: data.imgs[i],
name: 'file',
formData: {
id: data.id
},
success: (resp) => {
success++;//图片上传成功,图片上传成功的变量+1
console.log(resp);
console.log(i);
//这里可能有BUG,失败也会执行这里,所以这里应该是后台返回过来的状态码为成功时,这里的success才+1
},
fail: (res) => {
fail++;//图片上传失败,图片上传失败的变量+1
console.log('fail:' + i + "fail:" + fail);
},
complete: () => {
console.log(i);
i++;//这个图片执行完上传后,开始上传下一张
if (i == data.imgs.length) { //当图片传完时,停止调用
console.log('执行完毕');
console.log('成功:' + success + " 失败:" + fail);
} else {//若图片还没有传完,则继续调用函数
console.log(i);
data.i = i;
data.success = success;
data.fail = fail;
that.a(data);
}
}
});
}
})