uniapp图片详解

一、uniapp图片上传

uniapp提供了多种方式进行图片上传:

1.通过uni.uploadFile()方法，实现文件上传

uni.uploadFile({
  url: 'https://example.weixin.qq.com/upload', 
  filePath: 'xxxxx',//上传文件的路径
  name: 'file',//上传文件的名称
  header: {}, 
  formData: {}, 
  success: (res) => {},
  fail: (err) => {}
});

2.通过uni.chooseImage()方法，选择图片后再上传

uni.chooseImage({
  count: 9, 
  success: (res) => {}
  fail: (err) => {}
});

这个方法可以选择一些图片，返回的res中包含了选中图片的详细信息，包括路径、文件大小、尺寸等等，再通过uni.uploadFile()方法上传即可。

二、uniapp的图片标签

uniapp提供了一个<uni-image>标签，用于图片的展示。可以通过src属性设置图片路径，mode属性设置图片缩放模式，lazy-load属性设置图片是否懒加载，下面是一个简单的使用示例：

<uni-image src="https://example.com/image.jpg" mode="widthFix" lazy-load="true"></uni-image>

需要注意的是，<uni-image>标签只支持一些简单的缩放模式，比如aspectFit、aspectFill、widthFix、top等，如果需要更高级的缩放功能，可以通过CSS样式来实现。

三、uniapp图片查看器

uniapp提供了一个<uni-preview-image>标签，用于图片的预览和放大查看。通过urls属性设置图片路径列表，current属性设置当前查看的图片，下面是一个简单的使用示例：

<uni-preview-image urls="['https://example.com/image1.jpg','https://example.com/image2.jpg']" current="https://example.com/image1.jpg"></uni-preview-image>

需要注意的是，<uni-preview-image>标签只是一个图片预览组件，如果需要其他更复杂的功能，需要自己进行开发。

四、uniapp图片上显示按钮

如果需要在图片上显示按钮或者其他的交互元素，可以通过绝对定位和z-index属性来实现，下面是一个示例：

<uni-image src="https://example.com/image.jpg" mode="widthFix" lazy-load="true" style="position: relative;">
  <view style="position: absolute; top: 10px; right: 10px; z-index: 999;">
    <button @tap="handleTap">点击</button>
  </view>
</uni-image>

需要注意的是，按钮的触发需要通过事件来实现，因为图片本身无法响应点击事件。

五、uniapp图片显示不出来

如果在uniapp中图片无法正常显示，有可能是路径设置不正确或者资源文件丢失。建议仔细检查路径设置是否正确，并确认资源文件是否存在。

六、uniapp图片旋转

如果需要旋转图片，可以通过CSS样式来实现，比如transform: rotate(90deg)可以将图片旋转90度，下面是一个示例：

<uni-image src="https://example.com/image.jpg" mode="widthFix" lazy-load="true" style="transform: rotate(90deg);"></uni-image>

七、uniapp图片上传组件

如果需要更方便的图片上传功能，可以使用uniapp提供的<uni-upload>组件，下面是一个简单的使用示例：

<uni-upload url="https://example.com/upload" :files="files" :header="{Authorization: 'Bearer ' + token}" :name="'file'" :size-type="['original', 'compressed']" :max-count="9" :autoplay="true" :manual="false" :choose-length="3" :compress="true" :camera="true" :formData="{}" @before="before" @after="after" @success="success" @error="error">
  <view class="uni-icon uni-icon-add"></view>
</uni-upload>

需要注意的是，组件中的各个属性都有作用，需要根据自己的实际需求进行设置。

八、uniapp图片上传压缩

如果需要在上传图片时进行压缩，可以使用uniapp提供的<uni-img-cropper>组件，下面是一个简单的使用示例：

<uni-img-cropper :quality="90" :scale="2" :cut="true" :compress="true" :src="src" @over="over"></uni-img-cropper>

需要注意的是，组件中的各个属性都有作用，需要根据自己的实际需求进行设置。

九、uniapp图片懒加载

如果页面中有大量图片需要加载，可以使用uniapp提供的懒加载功能来优化性能，下面是一个简单的使用示例：

<uni-image src="https://example.com/image.jpg" mode="widthFix" lazy-load="true" style="transform: rotate(90deg);"></uni-image>

需要注意的是，这个功能只在一些支持IntersectionObserver的浏览器中生效，如果需要兼容其他浏览器，需要自己实现。

十、uniapp图片缓存方案选取

uniapp提供了多种图片缓存方案，可以根据实际需求进行选择。如果需要缓存网络图片，可以使用uniapp的图片缓存组件<uni-cache-img>，如果需要缓存本地图片，可以使用uniapp的本地存储功能。

//uni-cache-img用法示例
<uni-cache-img url="https://example.com/image.jpg" :forceUpdate="false" :compress="false" :autoUpdate="true" @update="update" @error="error"></uni-cache-img>
//本地缓存用法示例
uni.setStorageSync('key', 'value')
var value = uni.getStorageSync('key')
console.log(value)

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/200218.html