uniapp 实现图片预览单图预览和多图预览

落日映苍穹つ 2021-09-02 03:18 2132阅读 0赞

## uniapp 实现图片预览 单图预览和多图预览 ##

关键点就是调用

uni.previewImage({
    				current: index,
    				urls: photoList
    	});

如果是单图预览，current对应就是0，urls：必须是单个某一条传入。因为现在预览一张图片，你的current传死就是0.所以urls也必须是字符串形式

如果是多图预览，current，对应就是在循环图片数据的`索引`,urls: 是数组形式传入。因为uni.previewImage 要根据 current的索引，来动态匹配urls里面的数据

下面代码演示

### 单图预览模式 ###

// 预览图片单张
     previewImage(photoImg) {
          console.log('photoImg', photoImg)
          let imgsArray = [];
          imgsArray[0] = 'data:image/jpeg;base64,' +  photoImg;
          console.log('imgsArray[0]', imgsArray[0])
          uni.previewImage({
            current: 0,
            urls: imgsArray,
          });
        },

触发的点击事件

`我这里比较蛋疼的是，后端返回的图片数据，没有带 data:image/jpeg;base64, 所以我需要自己加上' data:image/jpeg;base64, '`

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70_pic_center]

### 多图预览模式 ###

// 预览图片多张
        previewImage(indexImg, photoImg) {
    			let photoList = photoImg.map(item => {
            let newImg = 'data:image/jpeg;base64,' + item
    				return newImg;
          }); //  这一步是为了给每一条图片数据，添加 'data:image/jpeg;base64,'。如果你的图片数据是完整的base64。此条步骤可以省略
    			uni.previewImage({
    				current: indexImg,
    				urls: photoList
    			});
    		},

点击事件

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70_pic_center 1]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70_pic_center 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70_pic_center 3]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70_pic_center]: /images/20210813/ff0c7673fe3047efb97ab7b903d304f8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20210813/5a7f8cae775047998ebbfc953e710062.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20210813/c6967db63c2644a8839cd87f8d877600.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20210813/c4f7d289123c46bf96a4880f7417535f.png