使用el-uplode上传图片缩略图

`el-upload` 是 Element UI 提供的一个富文本编辑器组件，它可以帮助你在网页上实现文件上传的功能，包括图片。如果你想在 `el-upload` 中生成并显示图片缩略图，可以按照以下步骤操作：

1. 首先，在 Vue 项目中安装 Element UI，并引入 `el-upload` 组件：

   <script src="https://unpkg.com/element-ui/lib/index.js"></script>

2. 定义 `el-upload` 组件，配置 `onSuccess` 回调函数来处理上传后的文件，这里你可以使用第三方库如 `sharp` 或者 `imgix` 来生成缩略图：

   <el-upload
     action="/api/upload"
     :before-upload="beforeUpload"
     :on-success="handleSuccess"
     :file-list="thumbnailList"
     accept="image/*"
   >
     <i class="el-icon-plus"></i>
     <div slot="tip">点击上传</div>
   </el-upload>

3. 定义 `beforeUpload` 函数，用于验证上传文件是否为图片：

   methods: {
     beforeUpload(file) {
       const isImage = /\.(jpg|png|jpeg)$/.test(file.type);
       if (!isImage) {
         this.$message.error('只允许上传图片');
         return false;
       }
       return true;
     },
   }

4. 定义 `handleSuccess` 函数，生成缩略图并更新列表：

   methods: {
     handleSuccess(response, file) {
       // 假设 response 包含原始图片 URL 和缩略图 URL
       let originalUrl = response.originalUrl;
       let thumbUrl = response.thumbUrl;

       // 可能需要使用 async/await 或者 Promise 来异步生成缩略图，然后将结果添加到 thumbnailList
       this.$axios.get(thumbUrl).then((res) => {
         const resizedThumb = res.data; // 假设 resizedThumb 是处理过的缩略图数据
         // 将新生成的缩略图替换到列表中
         this.thumbnailList.push({
           name: file.name,
           url: thumbUrl,
           origin: originalUrl,
           thumb: resizedThumb, // 这里假设是 base64 编码的数据
         });
       });
     },
   }

5. 初始化 `thumbnailList` 为空数组：

   data() {
     return {
       thumbnailList: [],
     };
   }

记得根据实际需求调整代码，比如从服务器返回的响应体获取缩略图URL，或者使用更复杂的图像处理库。