图片组件

  1. <image mode="aspectFit"
  2.   src='https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/muwu.jpg'
  3. ></image>

参数有：

  • lazy-load Boolean 图片懒加载。只针对 view 与 scroll-view 下的image有效
  • src String 图片资源地址
  • mode String 图片模式有 13 种，其中 4 种是缩放模式，9 种是裁剪模式。默认 ‘scaleToFill’，包括：
    • scaleToFill 不保持纵横比缩放图片，使图片完全适应
    • aspectFit 保持纵横比缩放图片，使图片的长边能完全显示出来
    • aspectFill 保持纵横比缩放图片，只保证图片的短边能完全显示出来
    • widthFix 宽度不变，高度自动变化，保持原图宽高比不变
    • top 不缩放图片，只显示图片的顶部区域
    • bottom 不缩放图片，只显示图片的底部区域
    • center 不缩放图片，只显示图片的中间区域
    • left 不缩放图片，只显示图片的左边区域
    • right 不缩放图片，只显示图片的右边边区域
    • top left 不缩放图片，只显示图片的左上边区域
    • top right 不缩放图片，只显示图片的右上边区域
    • bottom left 不缩放图片，只显示图片的左下边区域
    • bottom right 不缩放图片，只显示图片的右下边区域

事件有：

  • error 当错误发生时，发布到 AppService 的事件名，事件对象 event.detail = {errMsg: 'something wrong'}
  • load 当图片载入完毕时，发布到 AppService 的事件名，事件对象 event.detail = {height:'图片高度px', width:'图片宽度px'}

注意：

  • image 组件默认宽度 300px、高度 225px
  • src 仅支持相对路径，不支持绝对路径，支持 base64 码

选择图片

使用 chooseImage 从本地相册选择图片或使用相机拍照。

  1. uni.chooseImage({
  2.   count: 6, // 最多可以选择的图片张数，默认9
  3.   sizeType: ['original', 'compressed'], // original 原图，compressed 压缩图，默认二者都有
  4.   sourceType: ['album', 'camera'], // album 从相册选图，camera 使用相机，默认二者都有
  5.   success: function (res) {
  6.     console.log(res);
  7.   }
  8. });

success 返回值参数：

  • tempFilePaths: StringArray 图片的本地文件路径列表
  • tempFiles: ObjectArray 图片的本地文件列表，每一项是一个 File 对象

File 对象结构：

  • path: String 本地文件路径
  • size: Number 本地文件大小，单位：B

001.png

选择图片后通常需要一些后续操作，比如预览、上传等。

预览图片

使用 previewImage 预览图片。

  1. uni.chooseImage({
  2.   success: function (res) {
  3.     uni.previewImage({
  4.       urls: res.tempFilePaths
  5.     });
  6.   }
  7. });

5+APP 中支持的参数：

  • indicator： String 图片指示器样式，可取值： “default” - 底部圆点指示器； “number” - 顶部数字指示器； “none” - 不显示指示器。
  • loop： Boolean 是否可循环预览，默认值为”false”

获取图片信息

使用 getImageInfo 获取图片信息。

  1. uni.chooseImage({
  2.   success: function (res) {
  3.     res.tempFilePaths.forEach(filePath => {
  4.       uni.getImageInfo({
  5.         src: filePath,
  6.         success: function (image) {
  7.           console.log(image);
  8.         }
  9.       });
  10.     })
  11.   }
  12. });

002.png

保存图片到系统相册

使用 saveImageToPhotosAlbum 保存图片到系统相册。

以下示例为从相机捕获图像存储到本地：

  1. uni.chooseImage({
  2.   count: 1,
  3.   sourceType: ['camera'],
  4.   success: function (res) {
  5.     uni.saveImageToPhotosAlbum({
  6.       filePath: res.tempFilePaths[0],
  7.       success: function () {
  8.         console.log('save success');
  9.       }
  10.     });
  11.   }
  12. });

上传图片

以下示例，选择图片后进行上传操作

  1. uni.chooseImage({
  2.   count: 1,
  3.   success: (res) => {
  4.     uni.uploadFile({
  5.       url: 'https://www.example.com/upload',
  6.       filePath: res.tempFilePaths[0],
  7.       name: 'file',
  8.       success: (uploadFileRes) => {
  9.         console.log(uploadFileRes);
  10.       },
  11.       fail (e) {
  12.         console.log(e);
  13.       }
  14.     });
  15.   }
  16. });

保存图片

以下示例为选择图片后，将图片保存到本地，并预览图片：

  1. uni.chooseImage({
  2.   count: 1,
  3.   success: function (res) {
  4.     uni.saveFile({
  5.       tempFilePath: res.tempFilePaths[0],
  6.       success: function (res) {
  7.         uni.previewImage({
  8.           urls: [res.savedFilePath]
  9.         });
  10.       }
  11.     });
  12.   }
  13. });

图片模式

  1. <template>
  2. <view class="page">
  3.   <view class="image-list">
  4.     <view class="image-item" v-for="item in array" :key="item">
  5.       <view class="image-content">
  6.           <image style="width: 400px; height: 400px; background-color: #eeeeee;" :mode="item.mode" :src="src" @error="imageError"></image>
  7.       </view>
  8.       <view class="image-title">{{item.text}}</view>
  9.     </view>
  10.   </view>
  11. </view>
  12. </template>
  13. <script>
  14. export default {
  15.   data: {
  16.     array: [{
  17.       mode: 'scaleToFill',
  18.       text: 'scaleToFill：不保持纵横比缩放图片，使图片完全适应'
  19.     }, {
  20.       mode: 'aspectFit',
  21.       text: 'aspectFit：保持纵横比缩放图片，使图片的长边能完全显示出来'
  22.     }, {
  23.       mode: 'aspectFill',
  24.       text: 'aspectFill：保持纵横比缩放图片，只保证图片的短边能完全显示出来'
  25.     }, {
  26.       mode: 'top',
  27.       text: 'top：不缩放图片，只显示图片的顶部区域'
  28.     }, {
  29.       mode: 'bottom',
  30.       text: 'bottom：不缩放图片，只显示图片的底部区域'
  31.     }, {
  32.       mode: 'center',
  33.       text: 'center：不缩放图片，只显示图片的中间区域'
  34.     }, {
  35.       mode: 'left',
  36.       text: 'left：不缩放图片，只显示图片的左边区域'
  37.     }, {
  38.       mode: 'right',
  39.       text: 'right：不缩放图片，只显示图片的右边边区域'
  40.     }, {
  41.       mode: 'top left',
  42.       text: 'top left：不缩放图片，只显示图片的左上边区域'
  43.     }, {
  44.       mode: 'top right',
  45.       text: 'top right：不缩放图片，只显示图片的右上边区域'
  46.     }, {
  47.       mode: 'bottom left',
  48.       text: 'bottom left：不缩放图片，只显示图片的左下边区域'
  49.     }, {
  50.       mode: 'bottom right',
  51.       text: 'bottom right：不缩放图片，只显示图片的右下边区域'
  52.     }],
  53.     src: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/muwu.jpg'
  54.   },
  55.   methods: {
  56.     imageError: function (e) {
  57.       console.error('image发生error事件，携带值为' + e.detail.errMsg)
  58.     }
  59.   }
  60. }
  61. </script>
  62. <style>
  63.     .image-list {
  64.         display: flex;
  65.         flex-direction: column;
  66.     }
  68.     .image-item {
  69.         display: flex;
  70.         flex-direction: column;
  71.     }
  73.     .image-content {
  74.         justify-content: center;
  75.     }
  76. </style>