一、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)
