vue el-upload 文件怎么反显

时间: 2023-09-09 22:09:35 浏览: 193

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. 处理上传成功后的逻辑，如保存文件信息。通过这种方式，我们可以确保用户上传的图片在前端被适当压缩，从而减少服务器存储和处理的压力，同时保持良好的用户体验。

你可以使用Vue的el-upload组件来实现文件的反显。根据引用中的代码，你可以通过获取七牛的token，将文件上传到七牛，并获取返回的图片路径，然后将该路径放入el-upload组件的file-list属性中即可实现文件的反显。具体步骤如下： 1. 从后台获取七牛的token。 2. 使用七牛的上传接口将文件上传到七牛，到返回的图片路径。 3. 将返回的图片路径放入el-upload组件的file-list属性中，即可实现文件的反显。请注意，在实现过程中，还需要根据具体需求设置el-upload组件的其他相关属性，例如action、before-upload、data等，以及根据引用中的提示，确保不要自己设置请求头类型，让浏览器自行解析。同时，根据引用中的信息，你还可以了解到该系统使用的编程语言和框架，以便更好地理解和操作相关代码。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [vue中el-upload上传图片到七牛的示例代码](https://download.csdn.net/download/weixin_38675465/13977470)[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_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [vue+axios+el-upload实现文件上传（带参数）：](https://download.csdn.net/download/weixin_38502290/14016804)[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_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [go语言恶意代码检测系统-对接前端可视化与算法检测部分](https://download.csdn.net/download/liufang_imei/88222624)[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_2"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]

阅读全文

vue el-upload 文件怎么反显

相关推荐

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

【JavaScript源代码】vue el-upload上传文件的示例代码.docx

vue el-upload

vue el-upload headers

vue el-upload 例子

vue el-upload校验

vue el-upload样式

vue el-upload 上传文件时 如何分块计算大文件sha256

vue el-upload上传压缩包

vue el-upload accept属性

vue el-upload必填校验

vue el-upload 图片上传

vue el-upload 上传时before-upload对应的函数没被调用

vue el-upload实现上传文件到后台的功能

vue3 el-upload 传列表显示文件大小

vue el-upload上传图片file

vue el-upload 支持上传vedio

vue el-upload 上传到oss服务器

Vue3el-upload文件下载

最新推荐

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

解压软件 ZArchiver.apk

MATLAB实现小波阈值去噪：Visushrink硬软算法对比

管理建模和仿真的文件

【交互特征的影响】：分类问题中的深入探讨，如何正确应用交互特征

c语言从链式队列 中获取头部元素并返回其状态的函数怎么写

易语言实现画板图像缩放功能教程

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

【交互特征：优化与调试的艺术】：实战技巧，提升回归模型与分类模型的性能

用IDEA写一个高速收费系统框架附带代码

vue el-upload 上传文件时如何分块计算大文件sha256

c语言从链式队列中获取头部元素并返回其状态的函数怎么写