开始

可以选择9张图片 。可以对图片进行预览，同时也可以删除某一张图片。
image.png
先来看下官方提供给我们的demo例子

接口—-》媒体—-》图片
image.png
这就是我们要移植的功能。
image.png
官方的代码搜索图片
image.png

  1. {
  2.                     "path": "image/image",
  3.                     "style": {
  4.                         "navigationBarTitleText": "图片"
  5.                     }
  6.                 },

hello-uni-app2022\pages\API\image
image.png
复制代码
image.png

  1.                 <view class="uni-list list-pd">
  2.                     <view class="uni-list-cell cell-pd">
  3.                         <view class="uni-uploader">
  4.                             <view class="uni-uploader-head">
  5.                                 <view class="uni-uploader-title">点击可预览选好的图片</view>
  6.                                 <view class="uni-uploader-info">{{imageList.length}}/9</view>
  7.                             </view>
  8.                             <view class="uni-uploader-body">
  9.                                 <view class="uni-uploader__files">
  10.                                     <block v-for="(image,index) in imageList" :key="index">
  11.                                         <view class="uni-uploader__file">
  12.                                             <image class="uni-uploader__img" :src="image" :data-src="image" @tap="previewImage"></image>
  13.                                         </view>
  14.                                     </block>
  15.                                     <view class="uni-uploader__input-box">
  16.                                         <view class="uni-uploader__input" @tap="chooseImage"></view>
  17.                                     </view>
  18.                                 </view>
  19.                             </view>
  20.                         </view>
  21.                     </view>
  22.                 </view>

image.png

  1. var sourceType = [
  2.         ['camera'],
  3.         ['album'],
  4.         ['camera', 'album']
  5.     ]
  6.     var sizeType = [
  7.         ['compressed'],
  8.         ['original'],
  9.         ['compressed', 'original']
  10.     ]

image.png

  1. imageList: [],
  2.                 sourceTypeIndex: 2,
  3.                 sourceType: ['拍照', '相册', '拍照或相册'],
  4.                 sizeTypeIndex: 2,
  5.                 sizeType: ['压缩', '原图', '压缩或原图'],
  6.                 countIndex: 8,
  7.                 count: [1, 2, 3, 4, 5, 6, 7, 8, 9]

复制chooseImage开始往下所有的方法
image.png

  1. chooseImage: async function() {
  2.                 // #ifdef APP-PLUS
  3.                 // TODO 选择相机或相册时 需要弹出actionsheet，目前无法获得是相机还是相册，在失败回调中处理
  4.                 if (this.sourceTypeIndex !== 2) {
  5.                     let status = await this.checkPermission();
  6.                     if (status !== 1) {
  7.                         return;
  8.                     }
  9.                 }
  10.                 // #endif
  12.                 if (this.imageList.length === 9) {
  13.                     let isContinue = await this.isFullImg();
  14.                     console.log("是否继续?", isContinue);
  15.                     if (!isContinue) {
  16.                         return;
  17.                     }
  18.                 }
  19.                 uni.chooseImage({
  20.                     sourceType: sourceType[this.sourceTypeIndex],
  21.                     sizeType: sizeType[this.sizeTypeIndex],
  22.                     count: this.imageList.length + this.count[this.countIndex] > 9 ? 9 - this.imageList.length : this.count[this.countIndex],
  23.                     success: (res) => {
  24.                         this.imageList = this.imageList.concat(res.tempFilePaths);
  25.                     },
  26.                     fail: (err) => {
  27.                         console.log("err: ",err);
  28.                         // #ifdef APP-PLUS
  29.                         if (err['code'] && err.code !== 0 && this.sourceTypeIndex === 2) {
  30.                             this.checkPermission(err.code);
  31.                         }
  32.                         // #endif
  33.                         // #ifdef MP
  34.                         if(err.errMsg.indexOf('cancel') !== '-1'){
  35.                             return;
  36.                         }
  37.                         uni.getSetting({
  38.                             success: (res) => {
  39.                                 let authStatus = false;
  40.                                 switch (this.sourceTypeIndex) {
  41.                                     case 0:
  42.                                         authStatus = res.authSetting['scope.camera'];
  43.                                         break;
  44.                                     case 1:
  45.                                         authStatus = res.authSetting['scope.album'];
  46.                                         break;
  47.                                     case 2:
  48.                                         authStatus = res.authSetting['scope.album'] && res.authSetting['scope.camera'];
  49.                                         break;
  50.                                     default:
  51.                                         break;
  52.                                 }
  53.                                 if (!authStatus) {
  54.                                     uni.showModal({
  55.                                         title: '授权失败',
  56.                                         content: 'Hello uni-app需要从您的相机或相册获取图片，请在设置界面打开相关权限',
  57.                                         success: (res) => {
  58.                                             if (res.confirm) {
  59.                                                 uni.openSetting()
  60.                                             }
  61.                                         }
  62.                                     })
  63.                                 }
  64.                             }
  65.                         })
  66.                         // #endif
  67.                     }
  68.                 })
  69.             },
  70.             isFullImg: function() {
  71.                 return new Promise((res) => {
  72.                     uni.showModal({
  73.                         content: "已经有9张图片了,是否清空现有图片？",
  74.                         success: (e) => {
  75.                             if (e.confirm) {
  76.                                 this.imageList = [];
  77.                                 res(true);
  78.                             } else {
  79.                                 res(false)
  80.                             }
  81.                         },
  82.                         fail: () => {
  83.                             res(false)
  84.                         }
  85.                     })
  86.                 })
  87.             },
  88.             previewImage: function(e) {
  89.                 var current = e.target.dataset.src
  90.                 uni.previewImage({
  91.                     current: current,
  92.                     urls: this.imageList
  93.                 })
  94.             },
  95.             async checkPermission(code) {
  96.                 let type = code ? code - 1 : this.sourceTypeIndex;
  97.                 let status = permision.isIOS ? await permision.requestIOS(sourceType[type][0]) :
  98.                     await permision.requestAndroid(type === 0 ? 'android.permission.CAMERA' :
  99.                         'android.permission.READ_EXTERNAL_STORAGE');
  101.                 if (status === null || status === 1) {
  102.                     status = 1;
  103.                 } else {
  104.                     uni.showModal({
  105.                         content: "没有开启权限",
  106.                         confirmText: "设置",
  107.                         success: function(res) {
  108.                             if (res.confirm) {
  109.                                 permision.gotoAppSetting();
  110.                             }
  111.                         }
  112.                     })
  113.                 }
  115.                 return status;
  116.             }

这个isFullImage方法删除。
image.png
选择到了9张图片，直接return就可以了
image.png
复制css
image.png

  1. .cell-pd {
  2.         padding: 22rpx 30rpx;
  3.     }
  5.     .list-pd {
  6.         margin-top: 50rpx;
  7.     }

image.png

image.png

image.png

图片的删除功能

在image上加一个删除的图标。
image.png
选择这个垃圾桶的图标
image.png

image.png

  1. <view class="icon iconfont icon-shanchu">
  3.                                     </view>

把图片放在图片的右上角。
image.png
首先需要选择几张图片，位置偏了
image.png
给父元素加一个相对定位。
image.png

image.png

image.png
我在本地的测试的时候，发现删除的图标被图片盖住了，所以需要加一个z-index:10 。这样才能正常的显示

  1. .icon-shanchu{
  2.         position: absolute;
  3.         right: 0;
  4.         top: 0;
  5.         background: #333333;
  6.         color: #FFFFFF;
  7.         padding: 2upx 10upx;
  8.         z-index: 10;
  9.     }

给图标加上内边距，让他好看一点，上下为2，左右为10
image.png
加个圆角
image.png

image.png

删除事件

这里的delect是故意写错的，删除应该是delete，但是delete是个关键字。这里写上后页面就会报错。
image.png

  1. @tap="delete(index)"

增加一个弹出的模态框
image.png

image.png
image.png
改成es6语法。这样才可以在里面用this对象
image.png

image.png
确定后，被删除了
image.png

本节最终代码

  1. <template>
  2.     <view>
  3.         <uni-nav-bar :statusBar="true" rightText="发布" 
  4.         left-icon="back" left-text="返回"
  5.         @clickLeft="back" @clickRight="submit">
  6.             <view class="u-f-ajc" @tap="changelook">
  7.                 {{ yinsi }}
  8.                 <view class="icon iconfont icon-xialazhankai"></view>
  9.             </view>
  10.         </uni-nav-bar>
  11.         <!-- <uni-nav-bar :statusBar="true">
  12.             <block slot="left">
  13.                 <view class="back"></view>
  14.             </block>
  15.             <view class="u-f-ajc" @tap="changelook">
  16.                 {{ yinsi }}
  17.                 <view class="icon iconfont icon-xialazhankai"></view>
  18.             </view>
  19.             <block slot="right">
  20.                 <view class="city">
  21.                     发布
  22.                 </view>
  23.             </block>
  24.         </uni-nav-bar> -->
  26.         <!-- 多行输入框 -->
  27.         <view class="uni-textarea">
  28.             <textarea value="" v-model="text" placeholder="说一句话吧~" />
  29.         </view>
  31.         <view class="uni-list list-pd">
  32.             <view class="uni-list-cell cell-pd">
  33.                 <view class="uni-uploader">
  34.                     <view class="uni-uploader-head">
  35.                         <view class="uni-uploader-title">点击可预览选好的图片</view>
  36.                         <view class="uni-uploader-info">{{imageList.length}}/9</view>
  37.                     </view>
  38.                     <view class="uni-uploader-body">
  39.                         <view class="uni-uploader__files">
  40.                             <block v-for="(image,index) in imageList" :key="index">
  41.                                 <view class="uni-uploader__file">
  42.                                     <view class="icon iconfont icon-shanchu" @tap="delect(index)"></view>
  43.                                     <image class="uni-uploader__img" :src="image" :data-src="image" @tap="previewImage"></image>
  44.                                 </view>
  45.                             </block>
  46.                             <view class="uni-uploader__input-box">
  47.                                 <view class="uni-uploader__input" @tap="chooseImage"></view>
  48.                             </view>
  49.                         </view>
  50.                     </view>
  51.                 </view>
  52.             </view>
  53.         </view>
  55.     </view>
  56. </template>
  58. <script>
  59.     let changelook = ['所有人可见', '仅自己可见'];
  60.     var sourceType = [
  61.         ['camera'],
  62.         ['album'],
  63.         ['camera', 'album']
  64.     ]
  65.     var sizeType = [
  66.         ['compressed'],
  67.         ['original'],
  68.         ['compressed', 'original']
  69.     ]
  70.     export default {
  71.         data() {
  72.             return {
  73.                 yinsi: "所有人可见",
  74.                 text: "111",
  75.                 imageList: [],
  76.                 sourceTypeIndex: 2,
  77.                 sourceType: ['拍照', '相册', '拍照或相册'],
  78.                 sizeTypeIndex: 2,
  79.                 sizeType: ['压缩', '原图', '压缩或原图'],
  80.                 countIndex: 8,
  81.                 count: [1, 2, 3, 4, 5, 6, 7, 8, 9]
  82.             }
  83.         },
  84.         methods: {
  85.             // 返回
  86.             back(){
  87.                 uni.navigateBack({
  88.                     delta: 1
  89.                 })
  90.             },
  91.             // 发布
  92.             submit(){
  93.                 console.log('发布')
  94.             },
  95.             // 隐私
  96.             changelook(){
  97.                 console.log('隐私')
  98.                 uni.showActionSheet({
  99.                     itemList: changelook,
  100.                     success: function (res) {
  101.                         console.log(res.tapIndex);
  102.                         console.log(changelook[res.tapIndex]);
  103.                         this.yinsi=changelook[res.tapIndex];
  104.                     }
  105.                 });
  106.             },
  107.             chooseImage: async function() {
  108.                 // #ifdef APP-PLUS
  109.                 // TODO 选择相机或相册时 需要弹出actionsheet，目前无法获得是相机还是相册，在失败回调中处理
  110.                 if (this.sourceTypeIndex !== 2) {
  111.                     let status = await this.checkPermission();
  112.                     if (status !== 1) {
  113.                         return;
  114.                     }
  115.                 }
  116.                 // #endif
  118.                 if (this.imageList.length === 9) {
  119.                     // let isContinue = await this.isFullImg();
  120.                     // console.log("是否继续?", isContinue);
  121.                     // if (!isContinue) {
  122.                     //     return;
  123.                     // }
  124.                     return;
  125.                 }
  126.                 uni.chooseImage({
  127.                     sourceType: sourceType[this.sourceTypeIndex],
  128.                     sizeType: sizeType[this.sizeTypeIndex],
  129.                     count: this.imageList.length + this.count[this.countIndex] > 9 ? 9 - this.imageList.length : this.count[this.countIndex],
  130.                     success: (res) => {
  131.                         this.imageList = this.imageList.concat(res.tempFilePaths);
  132.                     },
  133.                     fail: (err) => {
  134.                         console.log("err: ",err);
  135.                         // #ifdef APP-PLUS
  136.                         if (err['code'] && err.code !== 0 && this.sourceTypeIndex === 2) {
  137.                             this.checkPermission(err.code);
  138.                         }
  139.                         // #endif
  140.                         // #ifdef MP
  141.                         if(err.errMsg.indexOf('cancel') !== '-1'){
  142.                             return;
  143.                         }
  144.                         uni.getSetting({
  145.                             success: (res) => {
  146.                                 let authStatus = false;
  147.                                 switch (this.sourceTypeIndex) {
  148.                                     case 0:
  149.                                         authStatus = res.authSetting['scope.camera'];
  150.                                         break;
  151.                                     case 1:
  152.                                         authStatus = res.authSetting['scope.album'];
  153.                                         break;
  154.                                     case 2:
  155.                                         authStatus = res.authSetting['scope.album'] && res.authSetting['scope.camera'];
  156.                                         break;
  157.                                     default:
  158.                                         break;
  159.                                 }
  160.                                 if (!authStatus) {
  161.                                     uni.showModal({
  162.                                         title: '授权失败',
  163.                                         content: 'Hello uni-app需要从您的相机或相册获取图片，请在设置界面打开相关权限',
  164.                                         success: (res) => {
  165.                                             if (res.confirm) {
  166.                                                 uni.openSetting()
  167.                                             }
  168.                                         }
  169.                                     })
  170.                                 }
  171.                             }
  172.                         })
  173.                         // #endif
  174.                     }
  175.                 })
  176.             },
  177.             previewImage: function(e) {
  178.                 var current = e.target.dataset.src
  179.                 uni.previewImage({
  180.                     current: current,
  181.                     urls: this.imageList
  182.                 })
  183.             },
  184.             async checkPermission(code) {
  185.                 let type = code ? code - 1 : this.sourceTypeIndex;
  186.                 let status = permision.isIOS ? await permision.requestIOS(sourceType[type][0]) :
  187.                     await permision.requestAndroid(type === 0 ? 'android.permission.CAMERA' :
  188.                         'android.permission.READ_EXTERNAL_STORAGE');
  190.                 if (status === null || status === 1) {
  191.                     status = 1;
  192.                 } else {
  193.                     uni.showModal({
  194.                         content: "没有开启权限",
  195.                         confirmText: "设置",
  196.                         success: function(res) {
  197.                             if (res.confirm) {
  198.                                 permision.gotoAppSetting();
  199.                             }
  200.                         }
  201.                     })
  202.                 }
  204.                 return status;
  205.             },
  206.             delect(index) {
  207.                 uni.showModal({
  208.                     title:'提示',
  209.                     content:'是否要删除该图片',
  210.                     success: (res) => {
  211.                         if(res.confirm) {
  212.                             this.imageList.splice(index,1);
  213.                         }
  214.                     }
  215.                 })
  216.             }
  217.         }
  218.     }
  219. </script>
  221. <style>
  222.     textarea{
  223.         border: 1upx solid #EEEEEE;
  224.     }
  225.     .cell-pd {
  226.         padding: 22rpx 30rpx;
  227.     }
  229.     .list-pd {
  230.         margin-top: 50rpx;
  231.     }
  232.     .uni-uploader__file{
  233.         position: relative;
  234.     }
  235.     .icon-shanchu{
  236.         position: absolute;
  237.         right: 0;
  238.         top: 0;
  239.         background: #333333;
  240.         color: #FFFFFF;
  241.         padding: 2upx 10upx;
  242.         z-index: 10;
  243.         border-radius: 10upx;
  244.     }
  245. /* .uni-navbar__header-container {
  246.     justify-content: center;
  247. } */
  248. </style>

结束