el-upload 展示图片方式 fit

时间: 2023-07-08 21:24:25 浏览: 100

vue+elementUI(el-upload)图片压缩,默认同比例压缩操作

5星 · 资源好评率100%

在本文中，我们将深入探讨如何在Vue.js项目中结合Element UI的`el-upload`组件实现图片的压缩功能，特别是在用户上传大尺寸图片时，确保前端能够处理并优化图片大小，减轻服务器负担。以下是一步步实现这个功能的详细步骤：我们需要一个通用的图片压缩方法，可以将这个方法封装在一个公共的`.js`文件中。以下是一个名为`compress`的压缩函数，它接受一个图片对象`fileObj`和一个回调函数`callback`作为参数： ```javascript export function compress(fileObj, callback) { try { const image = new Image(); image.src = URL.createObjectURL(fileObj); image.onload = function() { const that = this; // 默认按比例压缩 let w = that.width; let h = that.height; const scale = w / h; w = fileObj.width || w; h = fileObj.height || (w / scale); let quality = 0.7; // 默认图片质量为0.7 // 生成canvas const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); // 创建属性节点 const anw = document.createAttribute('width'); anw.nodeValue = w; const anh = document.createAttribute('height'); anh.nodeValue = h; canvas.setAttributeNode(anw); canvas.setAttributeNode(anh); ctx.drawImage(that, 0, 0, w, h); // 图像质量 if (fileObj.quality && fileObj.quality <= 1 && fileObj.quality > 0) { quality = fileObj.quality; } // quality值越小，所绘制出的图像越模糊 const data = canvas.toDataURL('image/jpeg', quality); // 压缩完成执行回调 const newFile = convertBase64UrlToBlob(data); callback(newFile); }; } catch (e) { console.log('压缩失败!'); } } // 将base64编码转换为Blob对象 function convertBase64UrlToBlob(urlData) { const bytes = window.atob(urlData.split(',')[1]); const ab = new ArrayBuffer(bytes.length); const ia = new Uint8Array(ab); for (let i = 0; i < bytes.length; i++) { ia[i] = bytes.charCodeAt(i); } return new Blob([ab], { type: 'image/png' }); } ``` 接下来，我们需要在Vue组件中使用`el-upload`来实现图片上传。`el-upload`组件提供了一系列的属性和事件，让我们能够自定义上传过程。以下是一个简单的示例： ```html <template> <el-form-item ref="uploadElement" prop="picUrl" class="upload-img-form" label-width="0"> <el-upload ref="uploadxls" class="avatar-uploader upload-img" :disabled="disabled" :auto-upload="false" :style="{height:'66px', backgroundImage:'url(' + dialogImageUrl + ')', backgroundRepeat:'no-repeat', backgroundPosition:'center', backgroundSize:'cover'}" :before-upload="beforeUpload" :on-success="handleSuccess" > <i class="el-icon-plus avatar-uploader-icon"></i> </el-upload> </el-form-item> </template> <script> import { compress } from '@/utils/image'; export default { methods: { beforeUpload(file) { return new Promise((resolve, reject) => { compress(file, (newFile) => { resolve(newFile); }); }); }, handleSuccess(response, file) { // 保存上传成功的文件信息，例如URL或ID // ... }, }, }; </script> ``` 在这个例子中，`beforeUpload`钩子函数会在文件上传前被调用。我们在这里调用`compress`函数对图片进行压缩，然后在压缩完成后，通过`resolve`返回新的压缩后的文件对象，使得上传继续进行。 `handleSuccess`函数则在文件上传成功后被触发，你可以在这里处理上传成功后的逻辑，比如保存文件的URL或ID。总结一下，实现Vue+Element UI(`el-upload`)的图片压缩功能，我们需要做以下几步： 1. 定义一个通用的图片压缩函数，利用`Image`、`Canvas`和`Blob`对象进行压缩。 2. 在Vue组件中使用`el-upload`，设置`before-upload`钩子，调用压缩函数对图片进行预处理。 3. 处理上传成功后的逻辑，如保存文件信息。通过这种方式，我们可以确保用户上传的图片在前端被适当压缩，从而减少服务器存储和处理的压力，同时保持良好的用户体验。

el-upload 组件可以通过设置 list-type 属性为 "picture-card" 或 "picture" 来展示上传的图片。在展示图片时，可以通过设置 show-file-list 属性为 false，来隐藏上传成功的文件列表。对于展示上传的图片的大小，可以通过设置 list-type 属性为 "picture-card" 或 "picture" 后，再通过设置 fit 属性的值来调整图片的显示方式。fit 属性有以下几个取值： - cover：将图片等比例缩放，直到图片宽度或高度达到容器的宽度或高度，多余部分裁剪。 - contain：将图片等比例缩放，直到图片宽度或高度等于容器的宽度或高度，不裁剪。 - fill：将图片拉伸或压缩，使其填满容器，可能导致图片变形。 - none：不对图片进行任何处理，按原大小显示。例如，设置 fit 属性为 "cover"，可以让图片等比例缩放，直到图片宽度或高度达到容器的宽度或高度，多余部分裁剪： ```html <el-upload class="upload-demo" action="/upload" list-type="picture-card" :show-file-list="false" > <i class="el-icon-plus"></i> <div class="el-upload__text">上传图片</div> <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> <img src="https://picsum.photos/200/200" slot="default" style="object-fit: cover;" /> </el-upload> ```

阅读全文

el-upload 展示图片方式 fit

相关推荐

elemetUi 组件--el-upload实现上传Excel文件的实例

vue中el-upload上传图片到七牛的示例代码

el-upload上传图片成功后，隐藏继续el-upload组件，只显示已上传的图片

el-upload图片进行拖拽排序

el-upload 头像上传

el-upload文件点击预览

给一些el-upload替换已上传文件的例子

在在el-from中使用el-image

el-select实现选择图片并回显图片

el-select实现上传图片并回显图片

element ui Upload 显示图片

element ui upload图片排序

vue 怎么使用element-ui上传图片并预览

使用vue3+Element-plus编写图片上传 代码加注释

element-plus中上传图片剪切图片

vue2+elementUI实现多图片展示

使用vue3+Element-Plus写一个图片上传 照片墙样式 代码加注释

利用element-plus写一个漂亮的带图片的添加页面

利用vue3 element-plus写一个漂亮的带图片的添加页面

最新推荐

yolov3 在 Open Images 数据集上预训练了 SPP 权重以及配置文件.zip

JHU荣誉单变量微积分课程教案介绍

管理建模和仿真的文件

【实战篇：自定义损失函数】：构建独特损失函数解决特定问题，优化模型性能

如何在ZYNQMP平台上配置TUSB1210 USB接口芯片以实现Host模式，并确保与Linux内核的兼容性？

Naruto爱好者必备CLI测试应用

"互动学习：行动中的多样性与论文攻读经历"

【强化学习损失函数探索】：奖励函数与损失函数的深入联系及优化策略

如何在Springboot后端项目中实现前端的多人视频会议功能，并使用Vue.js与ElementUI进行界面开发？

Android应用显示Ignaz-Taschner-Gymnasium取消课程概览

使用vue3+Element-plus编写图片上传代码加注释

使用vue3+Element-Plus写一个图片上传照片墙样式代码加注释