test2.vue 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122
  1. <template>
  2. <view>
  3. <view @tap="goCamera()" class="cameraButton">
  4. 拍照按钮
  5. </view>
  6. <view class="uni-list list-pd">
  7. <view class="uni-uploader__files">
  8. <view v-for="(image, index) in imageList" :key="index" class="abc">
  9. <view class="uni-uploader__file" style="inline-block">
  10. <view class="delete " :style="{'z-index': 99}" @tap="onDeleteClick(index)">x</view>
  11. <view class=" images-one">
  12. <image class="uni-uploader__img image-bg" :src="image" :data-src="image"
  13. @tap="previewImage"></image>
  14. </view>
  15. </view>
  16. </view>
  17. <view class="uni-uploader__input-box" v-show="imageList.length > 0">
  18. <view class="uni-uploader__input" @tap="onGetImgClick"></view>
  19. </view>
  20. </view>
  21. </view>
  22. </view>
  23. </template>
  24. <script>
  25. export default {
  26. data() {
  27. return {
  28. imageList: [],
  29. }
  30. },
  31. mounted() {
  32. },
  33. //拍照
  34. methods: {
  35. // 删除图片
  36. onDeleteClick(index) {
  37. this.imageList.splice(index, 1)
  38. },
  39. // previewImage() {
  40. // // 预览功能,相关博客有
  41. // },
  42. goCamera() {
  43. const that = this
  44. uni.chooseImage({
  45. count: 2, // 最多可以选择的图片张数,默认9
  46. sizeType: ['original', 'compressed'], //original 原图,compressed 压缩图,默认二者都有
  47. sourceType: ['camera'], //album 从相册选图,camera 使用相机,默认二者都有。如需直接开相机或直接选相册,请只使用一个选项
  48. success: function(res) {
  49. const len = that.imageList.length
  50. if (len >= 2) {
  51. uni.showToast({
  52. title: '图片最多上传2张'
  53. })
  54. } else {
  55. for (let i = 0; i < 2 - len; i++) {
  56. if (res.tempFilePaths[i]) that.imageList.push(res.tempFilePaths[i])
  57. }
  58. }
  59. }
  60. })
  61. },
  62. }
  63. }
  64. </script>
  65. <style>
  66. .cameraButton {
  67. border: 1px solid red;
  68. display: inline-block;
  69. border-radius: 10rpx;
  70. padding: 10rpx
  71. }
  72. .images-one {
  73. white-space: nowrap;
  74. position: relative;
  75. width: 150rpx;
  76. height: 150rpx;
  77. background-size: cover;
  78. background-position: center;
  79. vertical-align: middle;
  80. font-size: 1.5em;
  81. display: inline-block;
  82. margin-right: 20rpx
  83. }
  84. .image-bg {
  85. position: absolute;
  86. z-index: -1;
  87. left: 0;
  88. right: 0;
  89. bottom: 0;
  90. right: 0;
  91. width: 100%;
  92. height: 100%;
  93. }
  94. .abc {
  95. display: inline-block
  96. }
  97. </style>