【vue】van-uploader图片上传压缩处理

一、安装，在组件中引入

//安装
npm install image-compressor
//引入
import ImageCompressor from 'image-compressor.js'

二、van-uploader组件

<van-field 
    name="uploader" 
    label="上传图片" 
    left-icon="photo-o" 
    :rules="[{ required: true, message: '请上传图片' }]">
    <template #input>
       <van-uploader 
          accept="image/*"
          @delete="onDelete"
          :after-read="afterRead"
          v-model="uploader" 
          :max-count="1" />
     </template>
</van-field>

三、在图片上传前压缩图片

afterRead(file){
  // console.log('图片',file)
  this.imgUrl = file.file
},
compressFile(file) {
	return new Promise((resolve, reject) => {
		new ImageCompressor(file, {
			quality: 0.6, //压缩质量
			checkOrientation: false, //图片翻转，默认为false
			success(result) {
				resolve(result);
			},
			error(e) {
				reject(e)
			}
		})
	})
},
// 提交
async onSubmit(values) {
  // 图片压缩处理
  let file = await this.compressFile(this.imgUrl)
  const formData = new FormData()
  formData.append('orderNumber',this.orderNumber)
  formData.append('orderCompleteTime',this.value)
  formData.append('completeTimePeriod',this.radio)
  formData.append('completeImage',file)
  formData.append('CompleteRemark',this.message)
  if(this.orderNumber == '' || this.orderNumber == undefined || this.orderNumber == null){
   this.$toast.fail('订单编号不能为空')
   return
 }else{
   complete(formData).then(res=>{
   // console.log('清运公司提交',res);
   if(res.code === 200){
     this.$toast.success(res.msg)
    }
    if(res.code !== 200) {
      this.$toast.fail('调用失败')
    }
  })
 }
},