123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122 |
- <template>
- <view>
- <view @tap="goCamera()" class="cameraButton">
- 拍照按钮
- </view>
-
- <view class="uni-list list-pd">
- <view class="uni-uploader__files">
- <view v-for="(image, index) in imageList" :key="index" class="abc">
- <view class="uni-uploader__file" style="inline-block">
- <view class="delete " :style="{'z-index': 99}" @tap="onDeleteClick(index)">x</view>
- <view class=" images-one">
- <image class="uni-uploader__img image-bg" :src="image" :data-src="image"
- @tap="previewImage"></image>
- </view>
- </view>
- </view>
- <view class="uni-uploader__input-box" v-show="imageList.length > 0">
- <view class="uni-uploader__input" @tap="onGetImgClick"></view>
- </view>
- </view>
- </view>
- </view>
- </template>
- <script>
- export default {
- data() {
- return {
- imageList: [],
- }
- },
- mounted() {
- },
- //拍照
- methods: {
- // 删除图片
- onDeleteClick(index) {
- this.imageList.splice(index, 1)
- },
- // previewImage() {
- // // 预览功能,相关博客有
- // },
- goCamera() {
- const that = this
- uni.chooseImage({
- count: 2, // 最多可以选择的图片张数,默认9
- sizeType: ['original', 'compressed'], //original 原图,compressed 压缩图,默认二者都有
- sourceType: ['camera'], //album 从相册选图,camera 使用相机,默认二者都有。如需直接开相机或直接选相册,请只使用一个选项
- success: function(res) {
- const len = that.imageList.length
- if (len >= 2) {
- uni.showToast({
- title: '图片最多上传2张'
- })
- } else {
- for (let i = 0; i < 2 - len; i++) {
- if (res.tempFilePaths[i]) that.imageList.push(res.tempFilePaths[i])
- }
- }
- }
- })
- },
- }
- }
- </script>
- <style>
- .cameraButton {
- border: 1px solid red;
- display: inline-block;
- border-radius: 10rpx;
- padding: 10rpx
- }
- .images-one {
- white-space: nowrap;
- position: relative;
- width: 150rpx;
- height: 150rpx;
- background-size: cover;
- background-position: center;
- vertical-align: middle;
- font-size: 1.5em;
- display: inline-block;
- margin-right: 20rpx
- }
- .image-bg {
- position: absolute;
- z-index: -1;
- left: 0;
- right: 0;
- bottom: 0;
- right: 0;
- width: 100%;
- height: 100%;
- }
- .abc {
- display: inline-block
- }
- </style>
|