uniapp,九宫格上传图片

你可以使用uniapp自带的uni-upload组件来实现九宫格上传图片的功能。

1. 首先，在你的页面中引入uni-upload组件：

<uni-upload :preview-image="true" :max-count="9" :upload-text="'上传图片'" :size-type="['compressed']" :source-type="['album', 'camera']" @before="beforeUpload" @after="afterUpload" @delete="deleteImage"></uni-upload>

2. 在data中定义一个数组imageList，用来存放上传的图片：

data() {
  return {
    imageList: []
  }
}

3. 实现beforeUpload方法，在上传之前对图片进行压缩和限制上传数量：

beforeUpload(files) {
  // 限制上传数量不超过9张
  if (this.imageList.length + files.length > 9) {
    uni.showToast({
      title: '最多只能上传9张图片',
      icon: 'none'
    })
    return false
  }

  // 压缩图片
  for (let i = 0; i < files.length; i++) {
    uni.compressImage({
      src: files[i].path,
      quality: 50,
      success: res => {
        files[i].path = res.tempFilePath
      }
    })
  }
  return true
}

4. 实现afterUpload方法，在上传成功之后将图片添加到imageList中：

afterUpload(files) {
  for (let i = 0; i < files.length; i++) {
    this.imageList.push(files[i].path)
  }
}

5. 实现deleteImage方法，在删除图片时从imageList中移除：

deleteImage(index) {
  this.imageList.splice(index, 1)
}

6. 最后，在页面上展示图片列表：

<view class="image-list">
  <view class="image-item" v-for="(item, index) in imageList" :key="index">
    <image :src="item" mode="aspectFill"></image>
    <view class="delete-btn" @click="deleteImage(index)">删除</view>
  </view>
</view>

这样就实现了九宫格上传图片的功能。