upload-imgs.css
/* 第一套图片上传样式(内部图标相机) */
.upload-image-view {
width: 100%;
margin: 20upx 0 20upx 0;
display: flex;
flex-wrap: wrap;
align-items: center;
}
.upload-image-view .title {
width: 100%;
font-family: PingFang-SC-Regular;
font-size: 24upx;
color: #4a4a4a;
margin-bottom: 15upx;
line-height: 100%;
}
.upload-image-view .info {
width: 100%;
font-family: PingFang-SC-Regular;
font-size: 24upx;
color: #ff4259;
height: 24upx;
margin-top: 15upx;
line-height: 24upx;
}
.upload-image-view .image-view {
height: 130upx;
width: 130upx;
position: relative;
margin: 15upx 15upx 15upx 0upx;
border-radius: 8upx;
}
.upload-image-view .image-view image {
height: 100%;
width: 100%;
border-radius: 8upx;
}
.upload-image-view .image-view .del-btn {
background-color: #f67371;
border-radius: 50%;
width: 25upx;
height: 25upx;
position: absolute;
top: -12upx;
right: -12upx;
z-index: 2;
display: flex;
justify-content: center;
align-items: center;
}
.upload-image-view .image-view .del-btn .baicha {
display: inline-block;
width: 20upx;
height: 5upx;
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: 20upx;
height: 5upx;
background: #fff;
-webkit-transform: rotate(-90deg);
}
.upload-image-view .add-view {
height: 115upx;
width: 115upx;
margin: 15upx 15upx 15upx 0upx;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.00);
border: 3upx dashed #979797;
border-radius: 8upx;
}
/* 相机 */
.upload-image-view .add-view .xiangji {
height: 40upx;
width: 48upx;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.upload-image-view .add-view .xiangji .tixing {
width: 10upx;
height: 7upx;
background-color: #fff;
border-right: 10upx solid #fff;
border-bottom: 7upx solid #b2b2b2;
border-left: 10upx solid #fff;
}
.upload-image-view .add-view .xiangji .changfx {
height: 32upx;
width: 48upx;
border-radius: 5%;
background-color: #b2b2b2;
display: flex;
align-items: center;
justify-content: center;
}
.upload-image-view .add-view .xiangji .changfx .yuan1 {
height: 20upx;
width: 20upx;
border-radius: 50%;
background-color: #fff;
display: flex;
align-items: center;
justify-content: center;
}
.upload-image-view .add-view .xiangji .changfx .yuan2 {
height: 10upx;
width: 10upx;
border-radius: 50%;
background-color: #b2b2b2;
}
/* 第二套图片上传样式(内部图标 十字架)*/
/* 十字架 */
.upload-image-view .add-view .cross {
height: 48upx;
width: 48upx;
display: flex;
flex-wrap: wrap;
position: relative;
}
.upload-image-view .add-view .cross .transverse-line {
height: 100%;
width: 48%;
position: absolute;
border-right: 3upx solid #5A5A5A;
top: 0;
left: 0;
}
.upload-image-view .add-view .cross .vertical-line {
height: 48%;
width: 100%;
position: absolute;
border-bottom: 3upx solid #5A5A5A;
top: 0;
left: 0;
}
my-proskill-edit.vue
<template>
<view class="body-view">
<view class="info-table">
<view class="info-table-row">
<view class="table-row-left">技能名称</view>
<view class="table-row-right">
<input type="text" />
</view>
</view>
<view class="info-table-row">
<view class="table-row-left">熟练程度</view>
<view class="table-row-right">
<image src="../../static/imgs/system/leftjt.svg"></image>
</view>
</view>
</view>
<view class="uploads">
<!-- 图片上传 -->
<view class='upload-image-view'>
<!-- 标题已经省略 -->
<!-- <view class='title'>上传xxxx图片</view> -->
<block v-for="(image,index) in imageList" :key="index">
<view class='image-view'>
<image :src="image" :data-src="image" @tap="previewImage"></image>
<view class='del-btn' :data-index="index" @tap='deleteImage'>
<view class='baicha'></view>
</view>
</view>
</block>
<view class='add-view' v-if="imageList.length < imageLength" @tap="chooseImage">
<!-- 相机 -->
<!-- <view class="xiangji">
<view class="tixing"></view>
<view class='changfx'>
<view class='yuan1'>
<view class='yuan2'></view>
</view>
</view>
</view> -->
<!-- 十字架 -->
<view class="cross">
<view class="transverse-line"></view>
<view class="vertical-line"></view>
</view>
</view>
<view class='info'>上传证书/证件,不超过{{imageLength}}张。(非必填)</view>
</view>
<!-- 图片上传 -->
</view>
<view class="table-btn-view">
<button class="save-btn">保存</button>
</view>
</view>
</template>
<script>
var sourceType = [
['camera'], //拍照
['album'], //相册
['camera', 'album'] //拍照或相册
]
var sizeType = [
['compressed'], //压缩
['original'], //原图
['compressed', 'original'] //压缩或原图
]
export default {
data() {
return {
imageList: [], //保存图片路径集合
imageLength: 3, //限制图片张数
sourceTypeIndex: 2, //添加方式限制
sizeTypeIndex: 2, //图片尺寸限制
}
},
onUnload() {
},
methods: {
//选择图片
chooseImage: async function() {
uni.chooseImage({
sourceType: sourceType[this.sourceTypeIndex],
// #ifdef MP-WEIXIN
sizeType: sizeType[this.sizeTypeIndex],
// #endif
count: this.imageLength - this.imageList.length,
success: (res) => {
this.imageList = this.imageList.concat(res.tempFilePaths);
}
})
},
//预览图片
previewImage: function(e) {
var current = e.target.dataset.src
uni.previewImage({
current: current,
urls: this.imageList
})
},
//删除图片
deleteImage: function(e) {
var index = e.target.dataset.index;
var that = this;
var images = that.imageList;
images.splice(index, 1);
that.imageList = images;
}
}
}
</script>
<style>
@import "../../static/css/upload-imgs.css";
page {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
background-color: #FFFFFF;
}
.body-view {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
}
.info-table {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
background-color: #FFFFFF;
}
.info-table .info-table-row {
height: 120upx;
width: 92%;
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: space-between;
border-bottom: 1upx solid rgba(204, 204, 204, 1);
}
.info-table .info-table-row .table-row-left {
height: 40upx;
font-size: 28upx;
font-weight: 400;
color: rgba(28, 28, 28, 1);
line-height: 40upx;
}
.info-table .info-table-row .table-row-right {
display: flex;
align-items: center;
justify-content: center;
}
.info-table .info-table-row .table-row-right image {
width: 13upx;
height: 24upx;
}
.info-table .info-table-row .table-row-right input {
width: 560upx;
height: 40upx;
font-size: 28upx;
font-weight: 400;
color: rgba(28, 28, 28, 1);
line-height: 40upx;
}
.table-btn-view {
position: fixed;
bottom: 27upx;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.table-btn-view .save-btn {
width: 92%;
height: 90upx;
background: rgba(0, 170, 255, 1);
border-radius: 10upx;
color: #FFFFFF;
}
.uploads{
width: 92%;
}
</style>
图片上传核心样式
<!-- 图片上传 -->
<view class='upload-image-view'>
<!-- 标题已经省略 -->
<!-- <view class='title'>上传xxxx图片</view> -->
<block v-for="(image,index) in imageList" :key="index">
<view class='image-view'>
<image :src="image" :data-src="image" @tap="previewImage"></image>
<view class='del-btn' :data-index="index" @tap='deleteImage'>
<view class='baicha'></view>
</view>
</view>
</block>
<view class='add-view' v-if="imageList.length < imageLength" @tap="chooseImage">
<!-- 相机 -->
<!-- <view class="xiangji">
<view class="tixing"></view>
<view class='changfx'>
<view class='yuan1'>
<view class='yuan2'></view>
</view>
</view>
</view> -->
<!-- 十字架 -->
<view class="cross">
<view class="transverse-line"></view>
<view class="vertical-line"></view>
</view>
</view>
<view class='info'>上传证书/证件,不超过{{imageLength}}张。(非必填)</view>
</view>
<!-- 图片上传 -->
核心方法
var sourceType = [
['camera'], //拍照
['album'], //相册
['camera', 'album'] //拍照或相册
]
var sizeType = [
['compressed'], //压缩
['original'], //原图
['compressed', 'original'] //压缩或原图
]
export default {
data() {
return {
imageList: [], //保存图片路径集合
imageLength: 3, //限制图片张数
sourceTypeIndex: 2, //添加方式限制
sizeTypeIndex: 2, //图片尺寸限制
}
},
onUnload() {
},
methods: {
//选择图片
chooseImage: async function() {
uni.chooseImage({
sourceType: sourceType[this.sourceTypeIndex],
// #ifdef MP-WEIXIN
sizeType: sizeType[this.sizeTypeIndex],
// #endif
count: this.imageLength - this.imageList.length,
success: (res) => {
this.imageList = this.imageList.concat(res.tempFilePaths);
}
})
},
//预览图片
previewImage: function(e) {
var current = e.target.dataset.src
uni.previewImage({
current: current,
urls: this.imageList
})
},
//删除图片
deleteImage: function(e) {
var index = e.target.dataset.index;
var that = this;
var images = that.imageList;
images.splice(index, 1);
that.imageList = images;
}
}
}