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)