vue-cropper获取文件流

在Vue中使用vue-cropper插件获取文件流的步骤如下：

1. 在Vue项目中安装vue-cropper插件：使用npm或yarn命令安装插件，例如：`npm install vue-cropper`

2. 在需要使用cropper的组件中引入vue-cropper：在组件的script标签中添加以下代码：

   import Cropper from 'vue-cropper'

3. 注册vue-cropper组件：在组件的components选项中注册vue-cropper组件，例如：

   components: {
     'vue-cropper': Cropper
   }

4. 在组件的template中使用vue-cropper：添加以下代码来使用vue-cropper组件，并绑定相关属性和方法：

   <vue-cropper ref="cropper" :src="imageSrc" :outputSize="outputSize" @crop="onCrop"></vue-cropper>

5. 在组件的data选项中定义相关属性和方法：

   data() {
     return {
       imageSrc: '', // 用于绑定图片源
       outputSize: { // 用于设置输出图片大小
         width: 100,
         height: 100
       }
     }
   },
   methods: {
     onCrop(data) { // 处理裁剪后的图片数据
       console.log(data)
     }
   }

6. 使用vue-cropper的API获取文件流：通过调用vue-cropper的API可以获取文件流，例如：

   const cropper = this.$refs.cropper
   const imageData = cropper.getCroppedCanvas().toDataURL('image/jpeg')
   console.log(imageData)

注意：在以上代码中，`imageSrc`用于绑定图片源，`outputSize`用于设置输出图片的大小，`onCrop`为裁剪完成后的回调函数，可以在该函数中处理裁剪后的图片数据。