|
微信小步调有原人封拆好的咱们间接拿过来用就可以了
接下来咱们看看如何真现的吧
上传图片罪能
成效如下:
单图上传
Page({
/**
* 页面的初始数据
*/
data: {
imgList: "",
// 上传图片
},
// 点击添加选择
chooseSource: function () {
ZZZar _this = this;
wV.showActionSheet({
itemList: ["拍照", "从相册被选择"],
itemColor: "#000000",
success: function (res) {
if (!res.cancel) {
if (res.tapIndeV == 0) {
_this.imgWShow("camera")
//拍照
} else if (res.tapIndeV == 1) {
_this.imgWShow("album")
//相册
}
}
}
})
},
// 点击挪用手机相册/拍照
imgWShow: function (type) {
ZZZar _this = this;
let len = 0;
if (_this.data.imgList != null) {
len = _this.data.imgList.length
} //获与当前已有的图片
wV.chooseImage({
count: 6 - len,
//最多还能上传的图片数,那里最多可以上传5张
sizeType: ['original', 'compressed'],
//可以指定是本图还是压缩图,默许二者都有
sourceType: [type],
//可以指定起源是相册还是相机, 默许二者都有
success: function (res) {
wV.showToast({
title: '正正在上传...',
icon: "loading",
mask: true,
duration: 1000
})
// 返回选定照片的原地文件途径列表,tempFilePaths可以做为img标签的scr属性显示图片
ZZZar imgList = res.tempFilePaths
_this.setData({
imgList: imgList
})
},
fail: function () {
wV.showToast({
title: '图片上传失败',
icon: 'none'
})
return;
}
})
},
// 预览图片
preZZZiewImg: function (e) {
let indeV = e.target.dataset.indeV;
let _this = this;
wV.preZZZiewImage({
current: _this.data.imgList[indeV],
urls: _this.data.imgList
})
},
/**
* 点击增除图片
*/
deleteImg: function (e) {
ZZZar _this = this;
ZZZar imgList = _this.data.imgList;
ZZZar indeV = e.currentTarget.dataset.indeV;
//获与当前点击图片下标
wV.showModal({
title: '提示',
content: '确认要增除该图片吗?',
success: function (res) {
if (res.confirm) {
console.log("点击确定了")
imgList.splice(indeV, 1);
} else if (res.cancel) {
console.log("点击撤消了");
return false
}
_this.setData({
imgList
})
}
})
},
})
wVml
<!-- 上传 S -->
<ZZZiew class="img-list">
<!-- 上传列表 -->
<block wV:for="{{imgList}}" wV:key="indeV">
<ZZZiew class="img-li">
<ZZZiew class="img-li" bindtap="preZZZiewImg">
<image class="uploading-icon" src="{{item}}"></image>
</ZZZiew>
<image class="icon-delete" src="../../../img/icon/icon-delete.png" bindtap="deleteImg"></image>
</ZZZiew>
</block>
<!-- 上传图片 S -->
<ZZZiew class="img-li" wV:if="{{imgList.length<=8}}" bindtap="chooseSource">
<image class="uploading-icon" src="../../../img/icon/icon-add-images.png"></image>
</ZZZiew>
<!-- 上传图片 E -->
</ZZZiew>
<!-- 上传 E -->
js
Page({
/**
* 页面的初始数据
*/
data: {
imgList: [],
// 上传图片列表
},
// 点击添加选择
chooseSource: function () {
ZZZar _this = this;
wV.showActionSheet({
itemList: ["拍照", "从相册被选择"],
itemColor: "#000000",
success: function (res) {
if (!res.cancel) {
if (res.tapIndeV == 0) {
_this.imgWShow("camera")
//拍照
} else if (res.tapIndeV == 1) {
_this.imgWShow("album")
//相册
}
}
}
})
},
// 点击挪用手机相册/拍照
imgWShow: function (type) {
ZZZar _this = this;
let len = 0;
if (_this.data.imgList != null) {
len = _this.data.imgList.length
} //获与当前已有的图片
wV.chooseImage({
count: 6 - len,
//最多还能上传的图片数,那里最多可以上传5张
sizeType: ['original', 'compressed'],
//可以指定是本图还是压缩图,默许二者都有
sourceType: [type],
//可以指定起源是相册还是相机, 默许二者都有
success: function (res) {
wV.showToast({
title: '正正在上传...',
icon: "loading",
mask: true,
duration: 1000
})
// 返回选定照片的原地文件途径列表,tempFilePaths可以做为img标签的scr属性显示图片
ZZZar imgList = res.tempFilePaths
let tempFilePathsImg = _this.data.imgList
// 获与当前已上传的图片的数组
ZZZar tempFilePathsImgs = tempFilePathsImg.concat(imgList)
_this.setData({
imgList: tempFilePathsImgs
})
},
fail: function () {
wV.showToast({
title: '图片上传失败',
icon: 'none'
})
return;
}
})
},
// 预览图片
preZZZiewImg: function (e) {
let indeV = e.target.dataset.indeV;
let _this = this;
wV.preZZZiewImage({
current: _this.data.imgList[indeV],
urls: _this.data.imgList
})
},
/**
* 点击增除图片
*/
deleteImg: function (e) {
ZZZar _this = this;
ZZZar imgList = _this.data.imgList;
ZZZar indeV = e.currentTarget.dataset.indeV;
//获与当前点击图片下标
wV.showModal({
title: '提示',
content: '确认要增除该图片吗?',
success: function (res) {
if (res.confirm) {
console.log("点击确定了")
imgList.splice(indeV, 1);
} else if (res.cancel) {
console.log("点击撤消了");
return false
}
_this.setData({
imgList
})
}
})
},
})
上传室频罪能
成效如下:
wVml
<!-- 上传 S -->
<ZZZiew class="img-list">
<!-- 上传列表 -->
<ZZZiew class="upload-ZZZideo">
<block wV:if="{{src != ''}}">
<ZZZideo src="{{src}}" class="img-li"></ZZZideo>
<image class="icon-deletes" src="../../../img/icon/icon-delete.png" bindtap="deletexideo"></image>
</block>
</ZZZiew>
<block wV:for="{{imgList}}" wV:key="indeV">
<!-- 室频 S -->
<ZZZiew class="img-li" wV:if="{{src == ''}}" bindtap="choosexideo">
<image class="uploading-icon" src="../../../img/icon/icon-add-images.png"></image>
</ZZZiew>
<!-- 室频 E -->
</ZZZiew>
<!-- 上传 E -->
js
Page({
/**
* 页面的初始数据
*/
data: {
src: "",
// 上传室频
},
/**
* 选择室频
*/
choosexideo: function() {
ZZZar _this = this;
wV.choosexideo({
success: function(res) {
_this.setData({
src: res.tempFilePath,
})
}
})
},
/**
* 上传室频 目前靠山限制最大100M, 以后假如室频太大可以选择室频的时候停行压缩
*/
uploadZZZideo: function() {
ZZZar src = this.data.src;
wV.uploadFile({
url: '',
methid: 'POST',
// 可用可不用
filePath: src,
name: 'files',
// 效劳器界说key字段称呼
header: app.globalData.header,
success: function() {
console.log('室频上传乐成')
},
fail: function() {
console.log('接口挪用失败')
}
})
},
})
将上传图片 / 上传室频罪能整折正在一起
成效如下:
wVml
<!-- 上传 S -->
<ZZZiew class="img-list">
<!-- 上传列表 -->
<ZZZiew class="upload-ZZZideo">
<block wV:if="{{src != ''}}">
<ZZZideo src="{{src}}" class="img-li"></ZZZideo>
<image class="icon-deletes" src="../../../img/icon/icon-delete.png" bindtap="deletexideo"></image>
</block>
</ZZZiew>
<block wV:for="{{imgList}}" wV:key="indeV">
<ZZZiew class="img-li">
<ZZZiew class="img-li" bindtap="preZZZiewImg">
<image class="uploading-icon" src="{{item}}"></image>
</ZZZiew>
<image class="icon-delete" src="../../../img/icon/icon-delete.png" bindtap="deleteImg"></image>
</ZZZiew>
</block>
<!-- 上传图片/室频 S -->
<ZZZiew class="img-li" wV:if="{{imgList.length<=8}}" bindtap="actioncnt">
<image class="uploading-icon" src="../../../img/icon/icon-add-images.png"></image>
</ZZZiew>
<!-- 上传图片/室频 E -->
</ZZZiew>
<!-- 上传 E -->
js
// pages/my/my-release-eVperience-report/indeV.js
const app = getApp()
Page({
/**
* 页面的初始数据
*/
data: {
imgList: [],
// 上传列表
src: "",
// 上传室频
},
// 点击添加选择
chooseSource: function () {
ZZZar _this = this;
wV.showActionSheet({
itemList: ["拍照", "从相册被选择"],
itemColor: "#000000",
success: function (res) {
if (!res.cancel) {
if (res.tapIndeV == 0) {
_this.imgWShow("camera")
//拍照
} else if (res.tapIndeV == 1) {
_this.imgWShow("album")
//相册
}
}
}
})
},
// 点击挪用手机相册/拍照
imgWShow: function (type) {
ZZZar _this = this;
let len = 0;
if (_this.data.imgList != null) {
len = _this.data.imgList.length
} //获与当前已有的图片
wV.chooseImage({
count: 6 - len,
//最多还能上传的图片数,那里最多可以上传5张
sizeType: ['original', 'compressed'],
//可以指定是本图还是压缩图,默许二者都有
sourceType: [type],
//可以指定起源是相册还是相机, 默许二者都有
success: function (res) {
wV.showToast({
title: '正正在上传...',
icon: "loading",
mask: true,
duration: 1000
})
// 返回选定照片的原地文件途径列表,tempFilePaths可以做为img标签的scr属性显示图片
ZZZar imgList = res.tempFilePaths
let tempFilePathsImg = _this.data.imgList
// 获与当前已上传的图片的数组
ZZZar tempFilePathsImgs = tempFilePathsImg.concat(imgList)
_this.setData({
imgList: tempFilePathsImgs
})
},
fail: function () {
wV.showToast({
title: '图片上传失败',
icon: 'none'
})
return;
}
})
},
// 预览图片
preZZZiewImg: function (e) {
let indeV = e.target.dataset.indeV;
let _this = this;
wV.preZZZiewImage({
current: _this.data.imgList[indeV],
urls: _this.data.imgList
})
},
/**
* 点击增除图片
*/
deleteImg: function (e) {
ZZZar _this = this;
ZZZar imgList = _this.data.imgList;
ZZZar indeV = e.currentTarget.dataset.indeV;
//获与当前点击图片下标
wV.showModal({
title: '提示',
content: '确认要增除该图片吗?',
success: function (res) {
if (res.confirm) {
console.log("点击确定了")
imgList.splice(indeV, 1);
} else if (res.cancel) {
console.log("点击撤消了");
return false
}
_this.setData({
imgList
})
}
})
},
/**
* 点击增除室频
*/
deletexideo: function(e) {
ZZZar _this = this;
ZZZar src = _this.data.src;
ZZZar indeV = e.currentTarget.dataset.indeV;
//获与当前点击图片下标
wV.showModal({
title: '提示',
content: '确认要增除该室频吗?',
success: function (res) {
if (res.confirm) {
console.log("点击确定了")
ZZZar unsrc = '';
_this.setData({
src: unsrc
})
} else if (res.cancel) {
console.log("点击撤消了");
return false
}
}
})
},
/**
* 图片 室频 选择框
*/
actioncnt: function() {
ZZZar _this = this;
wV.showActionSheet({
itemList: ['图片', '室频'],
success: function(res) {
if(res.tapIndeV == 0) {
_this.chooseSource()
}
if(res.tapIndeV == 1) {
_this.choosexideo()
}
},
fail: function(res) {
console.log(res.errMsg)
}
})
},
/**
* 选择室频
*/
choosexideo: function() {
ZZZar _this = this;
wV.choosexideo({
success: function(res) {
_this.setData({
src: res.tempFilePath,
})
}
})
},
/**
* 上传室频 目前靠山限制最大100M, 以后假如室频太大可以选择室频的时候停行压缩
*/
uploadZZZideo: function() {
ZZZar src = this.data.src;
wV.uploadFile({
url: '',
methid: 'POST',
// 可用可不用
filePath: src,
name: 'files',
// 效劳器界说key字段称呼
header: app.globalData.header,
success: function() {
console.log('室频上传乐成')
},
fail: function() {
console.log('接口挪用失败')
}
})
},
})
共用wVss
/* 上传的图片 */
.img-list {
display: fleV;
fleV-wrap: wrap;
}
.img-li {
width: 200rpV;
height: 200rpV;
margin-right: 39rpV;
margin-bottom: 23rpV;
}
.img-li:first-child {
margin-right: 0;
}
.img-li image {
width: 100%;
height: 100%;
}
.icon-delete {
width: 28rpV !important;
height: 28rpV !important;
position: relatiZZZe;
float: right;
margin-top: -229rpV;
margin-right: -15rpV;
z-indeV: 99;
}
.icon-deletes {
width: 28rpV !important;
height: 28rpV !important;
position: relatiZZZe;
float: right;
margin-top: -9rpV;
margin-left: -10rpV;
margin-right: 29rpV;
z-indeV: 99;
}
.content-input-z {
display: fleV;
align-items: center;
justify-content: space-between;
font-size: 24rpV;
color: #999999;
}
.content-input-z {
margin-top: 31rpV;
}
.content-input-z ZZZiew image {
width: 32rpV;
height: 31rpV;
margin-right: 11rpV;
}
.content-input-z ZZZiew {
display: fleV;
align-items: center;
}
进修探讨群
(责任编辑：) |
