1. Upload pictures
<view class="ui-sub-h ui-sub-h2">
<view class="ui-text1">
上传图片：
</view>
<view class="uploads">
<!-- 图片上传 -->
<view class="upload-image-view">
<block v-for="(image,index) in imageListShow" :key="index">
<view class="image-view">
<image :src="image" :data-src="image" @tap="previewImage"></image>
<view class="del-btn" :data-index="index" @click="deleteImage(index)">
<view class="baicha"></view>
</view>
</view>
</block>
<view class="add-view" v-if="imageListShow.length < 5" @tap="chooseImageClick">
<view class="cross">
<view class="transverse-line"></view>
<view class="vertical-line"></view>
</view>
</view>
</view>
</view>
</view>
<view class="ui-cnt-li">
<view class="ui-cnt-li-h">上传视频：</view>
<view class="uploads">
<!-- 图片上传 -->
<view class="upload-image-view">
<block >
<view class="image-view" v-if="videolin">
<video class="ui-video" v-if="videolin" :src="videolin" controls></video>
<view class="del-btn" :data-index="index" @click="deleteImage(index)">
<view class="baicha"></view>
</view>
</view>
</block>
<view class="add-view" v-if="!videolin" @tap="chooseVideo">
<view class="cross">
<view class="transverse-line"></view>
<view class="vertical-line"></view>
</view>
</view>
</view>
</view>
</view>export default {
data(){
return {
imageList: [], //保存图片路径集合
imageListShow:[],
videolin:'',
video:'',
}
},
}// 选择图片
chooseImageClick() {
uni.chooseImage({
count: 5,
success: (chooseImageRes) => {
const tempFilePaths = chooseImageRes.tempFilePaths;
uni.showToast({
title: tempFilePaths,
icon: "none",
duration: 10000,
})
for (let i = 0; i < tempFilePaths.length; i++) {
uni.uploadFile({
url:'',// 上传图片接口
filePath: tempFilePaths[i],
// header: {
// 'Authorization': this.token
// },
name: 'file',
success: (uploadFileRes) => {
var data = JSON.parse(uploadFileRes.data);
console.log('+++++++++++++', data.Data)
可自定义拼接图片链接
this.imageListShow=this.imageListShow.concat(data.Data);
this.imageList = this.imageList.concat(data.Data);
console.log(this.imageList)
this.projectPicture = this.imageList.join(';')
console.log(this.projectPicture )
},
});
}
}
})
},
// 预览图片
previewImage: function(e) {
var current = e.target.dataset.src
console.log(current)
uni.previewImage({
current: current,
urls: this.imageListShow
})
},
// 删除图片
deleteImage: function(index) {
/* console.log(e) */
/* var index = e.target.dataset.index; */
console.log(index)
var that = this;
var images = that.imageListShow;
var images2 = that.imageList;
images.splice(index, 1);
images2.splice(index, 1);
//var eventImages = that.eventImages
// that.eventImages = (that.eventImages).splice(index, 1);
that.imageListShow = images;
that.imageList = images2;
console.log('==' + that.imageList)
that.projectPicture = that.imageList.join(',')
that.videolin = ''
that.video = ''
},
//上传视频
chooseVideo() {
uni.chooseVideo({
maxDuration: 15, //拍摄视频最长拍摄时间，单位秒。最长支持 60 秒
count: 1,
sourceType: ['camera'],
success: (res) => {
uni.showLoading({
mask: true,
title: '上传中...'
})
uni.uploadFile({
url: '',// 上传视频接口
filePath: res.tempFilePath,
header: {
'Authorization': this.token
},
name: 'file',
success: (uploadFileRes) => {
var data = JSON.parse(uploadFileRes.data);
console.log(data.Data,'================================')
uni.hideLoading()
this.videolin = data.Data // 可自定义拼接视频链接
this.video = data.Data
},
});
}
})
},css
.uploads {
width: 100%;
padding-left: 20rpx;
height: 200rpx;
}
.upload-image-view {
width: 100%;
margin: 20rpx 0;
display: flex;
flex-wrap: wrap;
align-items: center;
float: left;
}
.upload-image-view .add-view {
height: 142rpx;
width: 154rpx;
margin: 15rpx 15rpx 15rpx 0upx;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.00);
border: 3rpx dashed #979797;
border-radius: 8rpx;
}
.upload-image-view .add-view .cross {
height: 80rpx;
width: 80rpx;
display: flex;
flex-wrap: wrap;
position: relative;
}
.upload-image-view .add-view .cross .transverse-line {
height: 100%;
width: 48%;
position: absolute;
border-right: 3rpx solid #D4D4D5;
top: 0;
left: 0;
}
.upload-image-view .add-view .cross .vertical-line {
height: 48%;
width: 100%;
position: absolute;
border-bottom: 3rpx solid #D4D4D5;
top: 0;
left: 0;
}
.upload-image-view .image-view {
height: 142rpx;
width: 154rpx;
position: relative;
margin: 15rpx 15rpx 15rpx 0rpx;
border-radius: 8rpx;
}
.upload-image-view .image-view image {
height: 100%;
width: 100%;
border-radius: 8rpx;
}
.upload-image-view .image-view .del-btn {
background-color: #f67371;
border-radius: 50%;
width: 25rpx;
height: 25rpx;
position: absolute;
top: -12rpx;
right: -12rpx;
z-index: 2;
display: flex;
justify-content: center;
align-items: center;
}
.upload-image-view .image-view .del-btn .baicha {
display: inline-block;
width: 20rpx;
height: 5rpx;
background: #fff;
line-height: 0;
font-size: 0;
vertical-align: middle;
-webkit-transform: rotate(45deg);
}
.upload-image-view .image-view .del-btn .baicha:after {
content: '/';
display: block;
width: 20rpx;
height: 5rpx;
background: #fff;
-webkit-transform: rotate(-90deg);
}------------------Scan code-----------------------
// 扫码出入
scanCode(){
var that = this;
uni.scanCode({ //扫描API
onlyFromCamera: true,
success(res) { //扫描成功
console.log(res) //输出回调信息
var result = res.result
console.log('result',result);
uni.setStorageSync('result',result) // 存储数据
wx.navigateTo({
url:'../scanCode/scanCode?q=q&scanCode='+result
})
},
fail: (res) => {//接口调用失败的回调函数
uni.showToast({
title: '扫码失败',
icon: 'none',
duration: 1000
})
}
})
}