uniapp uview20本地对图片压缩后再上传

要在uniapp中使用uview2.0对图片进行本地压缩后再上传，可以按照以下步骤操作：

安装插件

在uniapp项目中安装uview-ui插件，具体操作可参考官方文档。

引入组件

在需要使用图片上传功能的页面中，引入uview的上传组件：

<template>
  <view>
    <u-upload :upload-url="uploadUrl" :file-list="fileList" @success="uploadSuccess"></u-upload>
  </view>
</template>

<script>
import uUpload from '@/components/u-upload/u-upload.vue'

export default {
  components: {
    uUpload
  },
  data() {
    return {
      uploadUrl: 'your_upload_url', // 上传接口地址
      fileList: [] // 上传文件列表
    }
  },
  methods: {
    uploadSuccess(res) {
      console.log('上传成功', res)
    }
  }
}
</script>

实现本地压缩

在上传前，先对图片进行本地压缩。可以使用uview提供的图片压缩方法：

// 引入uview的图片压缩方法
import { compressImage } from '@/common/js/uview/utils.js'

// 选择图片
uni.chooseImage({
  count: 1,
  success: (res) => {
    // 压缩图片
    compressImage(res.tempFilePaths[0], {
      quality: 0.8,
      success: (res) => {
        // 压缩成功，将压缩后的图片加入上传文件列表
        this.fileList.push({
          url: res.tempFilePath,
          status: 'loading'
        })
      },
      fail: (err) => {
        console.log('压缩失败', err)
      }
    })
  },
  fail: (err) => {
    console.log('选择图片失败', err)
  }
})

上传文件

在上传文件时，将压缩后的图片路径传给上传组件即可：

// 上传文件
this.$refs.upload.uploadFiles(this.fileList)

注意：上传组件的ref属性需要设置为"upload"，才能通过this.$refs.upload调用上传方法。

完整代码示例：

<template>
  <view>
    <u-upload ref="upload" :upload-url="uploadUrl" :file-list="fileList" @success="uploadSuccess"></u-upload>
    <button @tap="chooseImage">选择图片</button>
    <button @tap="uploadFiles">上传文件</button>
  </view>
</template>

<script>
import uUpload from '@/components/u-upload/u-upload.vue'
import { compressImage } from '@/common/js/uview/utils.js'

export default {
  components: {
    uUpload
  },
  data() {
    return {
      uploadUrl: 'your_upload_url',
      fileList: []
    }
  },
  methods: {
    chooseImage() {
      uni.chooseImage({
        count: 1,
        success: (res) => {
          compressImage(res.tempFilePaths[0], {
            quality: 0.8,
            success: (res) => {
              this.fileList.push({
                url: res.tempFilePath,
                status: 'loading'
              })
            },
            fail: (err) => {
              console.log('压缩失败', err)
            }
          })
        },
        fail: (err) => {
          console.log('选择图片失败', err)
        }
      })
    },
    uploadFiles() {
      this.$refs.upload.uploadFiles(this.fileList)
    },
    uploadSuccess(res) {
      console.log('上传成功', res)
    }
  }
}
</script>