el-upload+vue-cropper

在Vue中，你可以结合`element-ui`的`el-upload`组件和`vue-cropper`库来实现图片上传和裁剪功能。以下是一个基本的步骤：

1. 安装依赖：
首先，你需要安装这两个库，如果你还没有安装，可以在项目目录下运行：

   npm install element-ui vue-cropper

2. 引入组件：
在你的Vue文件中，引入这两个组件：

   import { ElUpload } from 'element-ui';
   import VueCropper from 'vue-cropper';

3. 在模板中使用`el-upload`和`vue-cropper`：

   <template>
     <div>
       <el-upload
         :action="uploadUrl"
         :on-success="handleSuccess"
         :on-change="handleChange"
         :before-upload="beforeUpload"
         ref="upload"
       >
         <el-button size="small" type="primary">点击选择图片</el-button>
       </el-upload>

       <vue-cropper ref="cropper" :img-url="croppedImageUrl" :output-type="outputType"></vue-cropper>
     </div>
   </template>

4. 编写方法：
- `handleSuccess(response, file)`：处理上传成功后的回调，这里可以更新`croppedImageUrl`。
- `handleChange(file)`：处理文件变化，可以预览图片并显示到cropper组件中。
- `beforeUpload(file)`：在上传前的钩子，可以在这里做些验证或处理。

5. 数据绑定：

   data() {
     return {
       uploadUrl: 'your-upload-url',
       croppedImageUrl: '',
       outputType: 'image/jpeg', // 可选类型：image/jpeg, image/png, image/webp
     };
   },
   methods: {
     handleSuccess(response, file) {
       // 在这里处理上传成功的响应并更新croppedImageUrl
       this.croppedImageUrl = response.data.url;
     },
     handleChange(file) {
       this.$refs.upload.fileList = file; // 将文件信息传递给cropper
       this.$refs.cropper.src = file.url; // 设置cropper的图片源
     },
     beforeUpload(file) {
       // 这里可以根据需求检查文件大小、类型等
     }
   }

注意替换`your-upload-url`为你实际的图片上传地址。