Vue技术开发中如何处理图片上传和压缩

npm install vue-upload-component vue-image-compressor

// 引入vue-upload-component库import VueUploadComponent from 'vue-upload-component'// 引入vue-image-compressor库import ImageCompressor from 'vue-image-compressor'

<template>  <div>    <vue-upload-component      :action="uploadUrl"      :extensions="allowedExtensions"      @complete="onUploadComplete"    ></vue-upload-component>  </div></template>

export default {  data() {    return {      uploadUrl: '/upload', // 图片上传的URL地址      allowedExtensions: ['jpg', 'jpeg', 'png'], // 允许上传的文件类型    }  },  methods: {    onUploadComplete(response) {      // 图片上传完成后的回调函数      console.log('uploaded image:', response)    },  },}

<template>  <div>    <vue-image-compressor      :file="file"      :quality="0.7"      @compressed="onImageCompressed"    ></vue-image-compressor>  </div></template>

export default {  data() {    return {      file: null, // 需要压缩的图片文件    }  },  methods: {    onImageCompressed(compressedImage) {      // 图片压缩完成后的回调函数      console.log('compressed image:', compressedImage)    },  },}