el-upload 横着显示

时间: 2023-10-08 08:06:09 浏览: 243

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组件横向显示，你可以使用flex布局来实现。在el-upload的外层容器上设置display:flex，并且将el-upload组件的样式设置为flex:1，这样el-upload组件就会自动占据剩余的空间并横向显示。下面是一个简单的示例代码： ```html <div style="display:flex;"> <el-upload class="flex-item" action="/upload" list-type="picture-card" :auto-upload="false"> <i class="el-icon-plus"></i> </el-upload> <el-upload class="flex-item" action="/upload" list-type="picture-card" :auto-upload="false"> <i class="el-icon-plus"></i> </el-upload> </div> ``` 在上面的代码中，我们使用了一个父容器div，并将其样式设置为display:flex。然后，在div内部放置了两个el-upload组件，并给它们添加了一个名为flex-item的类名，这个类名的样式设置为flex:1。这样，el-upload组件就会平分父容器的宽度，从而实现了横向显示的效果。请注意，以上代码只是一个示例，你可以根据自己的实际需求进行修改和调整。<span class="em">1</span><span class="em">2</span> #### 引用[.reference_title] - *1* [element上传照片（el-upload 超简单）](https://blog.csdn.net/boundle_ss/article/details/125600395)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* [elemetUi 组件--el-upload实现上传Excel文件的实例](https://download.csdn.net/download/weixin_38586942/12770492)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

阅读全文

el-upload 横着显示

相关推荐

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

el-upload有关代码

解决vue2.0 element-ui中el-upload的before-upload方法返回false时submit()不生效问题

el-upload上传EXCEL【引入组件和依赖】使用elementUI的el-upload组件

vue-cli3.0+element-ui上传组件el-upload的使用

vue结合el-upload实现腾讯云视频上传功能

通过vue的el-upload组件上传文件的例子

element-ui中el-upload多文件一次性上传的实现

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

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

vue+axios+el-upload实现文件上传（带参数）：

vue使用el-upload上传文件及Feign服务间传递文件的方法

Element UI：实现el-upload组件多文件一次性上传

深入了解el-upload组件的参数配置与选项解析

基于freeRTOS和STM32F103x的手机远程控制浴室温度系统设计源码

最新推荐

vue结合el-upload实现腾讯云视频上传功能

改变el-table宽度

Windows平台下的Fastboot工具使用指南

管理建模和仿真的文件

DLMS规约深度剖析：从基础到电力通信标准的全面掌握

修改代码，使其正确运行

Python机器学习基础入门与项目实践

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

【Shell脚本进阶】：wc命令行数统计的高级用法及解决方案

python编写一个程序，使得根据输入的起点和终点坐标值计算出坐标方位角