vue vantUI实现文件(图片、文档、视频、音频)上传(多文件)

时间: 2023-06-03 19:04:27 浏览: 299

Vue 图片压缩并上传至服务器功能

本文主要讲解基于 Vue + Vant ，实现移动端图片选择，并用 Canvas 压缩图片，最后上传至服务器。还会封装一个工具类，方便直接调用。一、工具类封装废话不多说先上代码，封装一个 CompressImageUtils 工具类： ** * 图片压缩工具类 * 最大高度和最大宽度都为 500，如果超出大小将等比例缩放。 * * 注意可能出现压缩后比原图更大的情况，在调用的地方自己判断大小并决定上传压缩前或压缩后的图到服务器。 */ // 将base64转换为blob export function convertBase64UrlToBlob(urlData) { le 在开发移动端应用时，经常会遇到用户需要上传图片的需求。为了提高用户体验和服务器性能，通常需要在客户端对图片进行压缩后再上传。本篇文章将详细介绍如何在 Vue 框架下，结合 Vant UI 库，实现图片的选择、压缩以及上传到服务器的功能。我们将封装一个名为 `CompressImageUtils` 的工具类，以便于在项目中直接调用。我们需要理解基本概念。Base64 是一种用于在网络上传输二进制数据的方法，它将二进制数据转化为可打印的 ASCII 字符串。Blob 是 JavaScript 中用于处理二进制数据的对象，常用于处理文件。在图片上传过程中，我们通常会将图片先转化为 Base64 格式，然后进行压缩，再转化为 Blob 对象，最后通过 AJAX 或 Fetch API 上传到服务器。在 Vue 项目中，我们可以使用 Vant UI 提供的图片选择组件 `van-image-picker`，让用户选择图片。选中的图片通常是 Base64 格式，接下来就是图片的压缩过程。 `CompressImageUtils` 工具类的核心是利用 HTML5 的 Canvas 对象进行图片压缩。Canvas 可以绘制图像，并且允许我们通过设置其宽度和高度来控制图片的大小，从而实现等比例缩放。在压缩过程中，我们设定一个最大高度（如 500px）和最大宽度（同样为 500px），如果图片原始尺寸超过这个范围，就按照比例进行缩放。注意，压缩可能会导致图片质量下降，压缩率可以通过 `canvas.toDataURL` 方法的第二个参数来控制，该参数代表质量，范围在 0 到 1 之间，0 表示最差质量，1 表示最好质量。下面是一段关键的代码示例： ```javascript // 将base64转换为blob export function convertBase64UrlToBlob(urlData) { let arr = urlData.split(',') let mime = arr[0].match(/:(.*?);/)[1] let bstr = atob(arr[1]) let n = bstr.length let u8arr = new Uint8Array(n) while (n--) { u8arr[n] = bstr.charCodeAt(n) } return new Blob([u8arr], { type: mime }) } // 压缩图片 export function compressImage(path) { const maxHeight = 500; const maxWidth = 500; return new Promise((resolve, reject) => { let img = new Image(); img.src = path; img.onload = function() { // ...计算压缩后的宽高... // ...生成canvas并绘制图片... // ...获取压缩后的base64... let base64 = canvas.toDataURL('image/*', 0.8); let blob = convertBase64UrlToBlob(base64); resolve(blob); }; }); } ``` 在实际应用中，你需要在用户选择图片后调用 `compressImage` 函数，传入图片的 Base64 数据。压缩完成后，你可以将得到的 Blob 对象通过 AJAX 或 Fetch 发送到服务器。例如，使用 Axios： ```javascript axios.post('/api/upload', { file: blob, // 其他参数... }, { headers: { 'Content-Type': 'multipart/form-data' } }).then(response => { console.log('图片上传成功:', response.data); }).catch(error => { console.error('图片上传失败:', error); }); ``` 以上就是在 Vue 中实现图片选择、压缩以及上传到服务器的流程。通过封装工具类，可以使得代码更易于维护和复用。确保在实际开发中考虑到各种边界情况，如图片格式支持、错误处理等，以提供更健壮的解决方案。

对于这个问题，我可以为您提供一些基本的思路。您可以使用VantUI组件库中的Uploader组件来完成多文件上传功能。您可以参考Vant官方文档中Uploader的示例代码，例如： ``` <van-uploader :after-read="afterRead" :before-read="beforeRead" :file-list="fileList" multiple /> ``` 通过配置Uploader的属性参数，可以实现多文件上传功能。当用户选择文件后，可以通过编写JavaScript函数来进行文件上传操作。同时，您需要注意上传文件的格式和大小，以及可能存在的网络延迟问题。希望这些信息能够帮助到您，如果您有其他问题欢迎继续提问。

阅读全文

vue vantUI实现文件(图片、文档、视频、音频)上传(多文件)

相关推荐

Vue前端实现多格式文件在线预览与Base64转换

Vue实现大文件断点续传的上传方案详解

vue vantUI实现文件（图片、文档、视频、音频）上传（多文件）

在Vue项目中使用Vant UI实现多文件上传时，如何区分处理图片、文档、视频和音频文件，并为它们分别设置不同的上传和预览逻辑？

基于vue vant ui 模仿网易云音乐html5页面的音乐网页demo.zip

vue实现移动端input上传视频、音频

vant ui 上传文件

如何在Vue项目中利用Vant UI库实现多种文件类型的多文件上传功能，并为不同文件类型设置专属的处理逻辑？

vant 实现多图片上传

使用vue全家桶制作的音乐播放器

mpvue开发音频类小程序踩坑和建议详解

基于better-scroll 实现歌词联动功能的代码

vant的van-uploader

Vue与Element UI实现阿里云图片上传教程

Vue2.0与webuploader结合实现大文件分片上传

工具变量城市供应链创新试点数据（2007-2023年）.xlsx

基于Python django-simpleui开发的博客系统详细文档+资料齐全.zip

嵌入式开发 操作系统教程 全部PPT课件 共8个章节.rar

基于Python Django教学资源管理系统网站+源码案例设计详细文档+资料齐全.zip

最新推荐

vue +vant 适合手机端上传图片图片 实现了上传、压缩、旋转图片

vue中实现图片压缩 file文件的方法

Vue实现带进度条的文件拖动上传功能

springboot整合vue实现上传下载文件

vue通过点击事件读取音频文件的方法

MATLAB新功能：Multi-frame ViewRGB制作彩色图阴影

管理建模和仿真的文件

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

在Flow-3D中如何根据水利工程的特定需求设定边界条件和进行网格划分，以便准确模拟水流问题？

XKCD Substitutions 3-crx插件：创新的网页文字替换工具

嵌入式开发操作系统教程全部PPT课件共8个章节.rar

vue +vant 适合手机端上传图片图片实现了上传、压缩、旋转图片