uview2图片上传预览

### uView2 图片上传与预览实现

#### 使用 `uni.chooseImage` 和 `uni.uploadFile`

为了在 uView2 中实现图片上传和预览的功能，可以采用如下方式：

- 利用 `uni.chooseImage` API 来选取本地图片文件。此操作完成后会获得所选图片的临时路径列表[^1]。

// 调用 chooseImage 方法获取用户选择的照片
uni.chooseImage({
    count: 9, // 默认最多可以选择的数量
    sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
    sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
    success(res) {
        const tempFilePaths = res.tempFilePaths;
        console.log('Selected Image Paths:', tempFilePaths);
        
        // 将这些路径传递给处理函数用于后续的操作比如显示或进一步上传
    }
});

#### 处理并展示已选图片

一旦获得了图片的临时存储位置，则可以通过设置页面上的 `<image>` 组件来加载它们作为缩略图供用户查看[^2]。

<template>
  <view class="preview-container">
      <!-- 动态绑定 src 属性 -->
      <block v-for="(item,index) in imgUrls" :key="index">
          <image @click="handlePreview(index)" :src="item"></image>
      </block>
  </view>
</template>

<script>
export default {
  data() {
    return {
      imgUrls: [], // 存储所有要预览的图片链接数组
    };
  },
  
  methods: {
    handlePreview(currentIndex){
       uni.previewImage({
           current: currentIndex,
           urls: this.imgUrls
       });
    }
}
</script>

#### 发送至服务器保存

对于实际应用而言，在完成上述步骤之后还需要把选定好的照片提交到远程服务端进行持久化存储。这一步通常借助于 `uni.uploadFile` 或者 `uni.request` 接口完成。

async function uploadImages(filePaths) {
    filePaths.forEach((path,i)=>{
        uni.uploadFile({
            url:'http://example.com/api/upload',
            filePath:path,
            name:'file',
            formData:{'user':'test'},
            success(uploadRes){
                console.log(`第${i+1}张图片上传成功`);
            },
            fail(err){
                console.error(`${err.errMsg}`);
            }
        })
    })
}