当前位置: 首页 > news >正文

前端上传文件

前言

vue 举例,原生 html + css + js 现在应该很少有人去写了

一、绘制样式

绘制两个标签,一个 <div></div> ,一个 <input type="file" />; 为 <div></div>添加 css 样式,并隐藏 <input type="file" /> ; 点击 <div></div> 标签时,调用 <input type="file" />

<div @click="clickUploader">点击此处上传文件,可以给我添加各种样式哦</div>
<input type="file" style="display: none" ref="uploader" @change="fileChange" />

二、逻辑处理

考虑到项目中可能不止一个地方使用文件上传,为了方便复用,可以把上传的逻辑抽离出来,单独放到一个文件中

src 目录下创建 mixins 文件夹,在此文件下创建一个 file.js 文件

file.js

import { upload } from "@/api/file.js";export default {methods: {fileUpload(file) {let parma = new FormData();parma.append("file", file);return new Promise((resolve, reject) => {upload(parma).then((res) => {resolve(res);}).catch((err) => {reject(err);});});},},
};
  • 注意1:上传的文件需要放在 FormData 对象中
  • 注意2:对象中的 key 值视具体情况而定,此处的 file 只是举例
  • 注意3:FormData 对象添加新属性的方法是 append(key, value)

vue 中的代码如下,引入上面写的 js ,点击 div ,调用 <input type="file" />,并执行上传文件的方法

.vue

<template><div><div @click="clickUploader">点击此处上传文件</div><input type="file" style="display: none" ref="uploader" @change="fileChange" /></div>
</template><script>
import file from "@/mixins/file";
export default {mixins: [file],data() {return {uploadFileList: [],};},methods: {// 文件上传clickUploader() {this.$refs.uploader.click();},// 选择文件fileChange(e) {this.fileUpload(e.target.files[0]).then((res) => {this.uploadFileList = [...this.uploadFileList, res];});e.target.value = null; // 清除 input 中的值},},
};
</script>
  • 注意1:用混入的方式引入 file.js 文件
  • 注意2:上传完成后需要清除 input 中的值,否则无法上传重复文件

三、图片压缩

现在的手机拍照像素都很高,照片动辄十几 Mb ,如果把这么大的文件上传,必然会导致上传速度慢,且会造成极大的资源浪费,因此,我们需要对图片进行压缩

延伸: 除图片外,其它大文件也可以进行处理,比如分段式上传,不过本文就不做赘述了

图片压缩的原理是把图片转成 canvas ,因为我们可以对 canvas 的宽高和分辨率进行自定义,所以可以转成我们想要的大小,这个功能并不难实现,不过这个功能已经有人做出了插件 image-conversion ,本文就不对具体实现过程和原理进行分析了

想要了解话可以在评论区留言,以后或许会考虑写一篇博客专门去分析

npm i image-conversion --save
import * as imageConversion from 'image-conversion';return new Promise((resolve, reject) => {imageConversion.compressAccurately(file, 800).then((res) => {resolve(res);});
});

四、附:文件后缀名提取

export default {methods: {// 获取文件格式(此处是为了显示不同文件图标,并对图标添加自定义颜色,具体可根据需求进行修改)fileType(e) {if (!e) {return false;}let [list, fileIcon, format] = [e.split("."),{icon: null,color: null,},];format = list[list.length - 1];let format = list[list.length - 1];switch (format) {case "xls":fileIcon = {icon: "icon-ECEL",type: "xls",color: "",};break;case "xlsx":fileIcon = {icon: "icon-ECEL",type: "xlsx",color: "",};break;case "doc":fileIcon = {icon: "icon-WORD",type: "",color: "",};break;case "docx":fileIcon = {icon: "icon-WORD",type: "docx",color: "",};break;case "pptx":fileIcon = {name: "icon-PPT",type: "pptx",color: "",};break;case "png":fileIcon = {icon: "icon-PNG",type: "png",color: "",};break;case "jpg":fileIcon = {icon: "icon-JPG",type: "jpg",color: "",};break;case "jpeg":fileIcon = {icon: "icon-JPG",type: "jpeg",color: "",};break;case "gif":fileIcon = {icon: "icon-GIF",type: "",color: "",};break;case "txt":fileIcon = {icon: "icon-TXT",type: "txt",color: "",};break;case "wps":fileIcon = {icon: "icon-WPS",type: "wps",color: "",};break;}return fileIcon;},},
};

相关文章:

前端上传文件

前言 以 vue 举例&#xff0c;原生 html css js 现在应该很少有人去写了 一、绘制样式 绘制两个标签&#xff0c;一个 <div></div> &#xff0c;一个 <input type"file" />&#xff1b; 为 <div></div>添加 css 样式&#xff0c…...

后台管理系统中选项卡的动态渲染

动态渲染选项卡其中router-link是为了当点击选项卡时跳转到选项卡所在的列表选项卡需要动态渲染&#xff0c;其中active是当选中后激活选中的样式为图标添加点击删除事件在状态机配置tabMenu&#xff08;为了动态渲染&#xff09;需要在tabMenu添加&#xff1a;active、title、…...

网络层重点协议之IP协议(IPv4)

网络层的作用就是来路由的选择&#xff0c;规划传输的路径&#xff0c;其中网络层的重点协议就是IP协议。4位版本号版本号的取值只有4和64位首部长度描述了IP报头有多长&#xff0c;报头中有一个选项部分&#xff0c;是变长的&#xff0c;是可有可无的部分&#xff0c;所以IP报…...

CentOS Stream 8配置DNS

1&#xff1a;用CentOS搭建DNS的目的是想解析一台下载服务器&#xff0c;IP地址172.18.0.58&#xff0c;现在是用IP地址方的式访问&#xff0c;想搭建DNS服务器用域名的方式访问。 使用下面的命令查看一下当前系统的Bind版本。 yum info bind 版本是9.11.36.我的CentOS是最小…...

【roLabelImg】windows下旋转框标注软件安装、使用、rolabelimg打包成exe

主要参考&#xff1a; roLabelImg安装、使用、数据格式roLabelImg在Win10系统下打包成exe - 问雪的文章 - 知乎 一、安装 1.1 直接下载exe运行 劝大家直接去下别人编译好的吧&#xff0c;本来是训练模型标记的&#xff0c;结果搞了半天去了解这个软件了&#xff0c;哎~ 我…...

2023美赛F题:绿色经济

文章目录背景要求词汇表背景 国内生产总值&#xff08;GDP&#xff09;可以说是最知名且最常用的衡量一个国家经济健康的指标之一。它通常用于确定一个国家的购买力和贷款能力&#xff0c;为国家提出提高GDP的政策和项目提供了动力。GDP “衡量一个国家在一段特定时间内生产的…...

华为OD机试 - 剩余可用字符集 | 备考思路,刷题要点,答疑 【新解法】

最近更新的博客 【新解法】华为OD机试 - 关联子串 | 备考思路,刷题要点,答疑,od Base 提供【新解法】华为OD机试 - 停车场最大距离 | 备考思路,刷题要点,答疑,od Base 提供【新解法】华为OD机试 - 任务调度 | 备考思路,刷题要点,答疑,od Base 提供【新解法】华为OD机试…...

“笨办法”学Python 3 ——练习 40. 模块、类和对象

练习40 模块、类和对象 知识点&#xff1a; 40.1.0 模块就像字典 my_stuff[apple] #my_stuff是字典&#xff0c;访问字典apple键的值 import mystuff mystuff.apple() #mystuff是模块&#xff0c;模块访问函数apple() print(mystuff.tangerine) #模块访问变量tangerine说明P…...

自动驾驶:BEVDet

自动驾驶&#xff1a;BEVDetIntroductionMethodoloData AugmentationNetwork StructureScale-NMS实验Introduction 作者通过现有的算法&#xff08;LSS&#xff09;、独特的数据增强方案与新的NMS方案整合了一个BEV框架&#xff08;BEVDet&#xff09;。 如下图&#xff1a; …...

vue的组件通信

文章目录3. 组件通信3.1 父组件-->子组件3.3组件自定义事件&#xff08;子->父&#xff09;3.4.全部事件总线&#xff08;两代以上&#xff09;3.5消息的订阅与发布3. 组件通信 3.1 父组件–>子组件 <Student name"张三" :age"18"></St…...

Typescript的定义及使用优势

编程语言的类型&#xff1a; 动态类型语言 (Dynamically Typed Language&#xff09;静态类型语言 (Statically Typed Language&#xff09; 两种语言的含义及区别&#xff1a; 比如JS、python就是动态类型语言&#xff0c;什么是动态类型语言&#xff0c;通俗的讲&#xff0…...

正则验证:手机号码验证

<!DOCTYPE html> <html> <head> <meta charset"utf-8"> <title></title> </head> <body> 手机号码<input type"text" id"phone"> <span…...

视频融合 flv流格式对接(上)

FLV 是FLASH VIDEO的简称&#xff0c;FLV流媒体格式是随着Flash MX的推出发展而来的视频格式。由于它形成的文件极小、加载速度极快&#xff0c;使得网络观看视频文件成为可能&#xff0c;它的出现有效地解决了视频文件导入Flash后&#xff0c;使导出的SWF文件体积庞大&#xf…...

提问:影视剪辑解说都是怎样配音的,软件合成还是自己配音?

“影视剪辑解说都是怎样配音的&#xff0c;软件合成还是自己配音&#xff1f;”这是一个很好的问题并且困扰着很多人&#xff0c;因为不知道该如何选择。究竟应该使用软件来完成配音工作呢?还是自己动手配音呢&#xff1f;这是一个很难回答的问题。如果你问我的话&#xff0c;…...

基于RK3588的嵌入式linux系统开发(二)——uboot源码移植及编译

由于官方的SDK占用空间较大&#xff08;大约20GB左右&#xff09;&#xff0c;需要联系相关供应商提供&#xff0c;且官方的SDK通过各种脚本文件进行集成编译&#xff0c;难以理解系统开发的详细过程。本章介绍直接从官方Github网站下载源码进行移植&#xff0c;进行uboot移植及…...

excel报表技巧:几个关于汇报演示方面的小功能

年终了&#xff0c;总结汇报避免不了。如果你的PPT还不够好&#xff0c;那就直接用Excel做汇报吧~这里有5条小技巧&#xff0c;可以帮助你最高效地展示自己的成绩报表&#xff01;想象一下&#xff0c;用SHIFTCTRLF1全屏显示你的工作表&#xff0c;配合上CtrlPageDown进行工作表…...

【数据结构与算法】Manacher算法

&#x1f320;作者&#xff1a;阿亮joy. &#x1f386;专栏&#xff1a;《数据结构与算法要啸着学》 &#x1f387;座右铭&#xff1a;每个优秀的人都有一段沉默的时光&#xff0c;那段时光是付出了很多努力却得不到结果的日子&#xff0c;我们把它叫做扎根 目录&#x1f449;…...

【CMake】CMake构建C++代码(一)

在Linux开发过程中&#xff0c;难免会用到CMake来构建你的代码。本文将说明如何构建自己的代码&#xff0c;将自己的代码变为共享库&#xff0c;共其他代码使用。 文章目录在Linux开发过程中&#xff0c;难免会用到CMake来构建你的代码。本文将说明如何构建自己的代码&#xff…...

让我们,从头到尾,通透I/O模型

什么是IO 一句话总结 IO就是内存和硬盘的输入输出 I/O 其实就是 input 和 output 的缩写&#xff0c;即输入/输出。 那输入输出啥呢&#xff1f; 比如我们用键盘来敲代码其实就是输入&#xff0c;那显示器显示图案就是输出&#xff0c;这其实就是 I/O。 而我们时常关心的磁盘…...

Word控件Spire.Doc 【Table】教程(16):C#/VB.NET:在 Word 表格中插入或提取图像

Spire.Doc for .NET是一款专门对 Word 文档进行操作的 .NET 类库。在于帮助开发人员无需安装 Microsoft Word情况下&#xff0c;轻松快捷高效地创建、编辑、转换和打印 Microsoft Word 文档。拥有近10年专业开发经验Spire系列办公文档开发工具&#xff0c;专注于创建、编辑、转…...

【OSG学习笔记】Day 18: 碰撞检测与物理交互

物理引擎&#xff08;Physics Engine&#xff09; 物理引擎 是一种通过计算机模拟物理规律&#xff08;如力学、碰撞、重力、流体动力学等&#xff09;的软件工具或库。 它的核心目标是在虚拟环境中逼真地模拟物体的运动和交互&#xff0c;广泛应用于 游戏开发、动画制作、虚…...

保姆级教程:在无网络无显卡的Windows电脑的vscode本地部署deepseek

文章目录 1 前言2 部署流程2.1 准备工作2.2 Ollama2.2.1 使用有网络的电脑下载Ollama2.2.2 安装Ollama&#xff08;有网络的电脑&#xff09;2.2.3 安装Ollama&#xff08;无网络的电脑&#xff09;2.2.4 安装验证2.2.5 修改大模型安装位置2.2.6 下载Deepseek模型 2.3 将deepse…...

如何配置一个sql server使得其它用户可以通过excel odbc获取数据

要让其他用户通过 Excel 使用 ODBC 连接到 SQL Server 获取数据&#xff0c;你需要完成以下配置步骤&#xff1a; ✅ 一、在 SQL Server 端配置&#xff08;服务器设置&#xff09; 1. 启用 TCP/IP 协议 打开 “SQL Server 配置管理器”。导航到&#xff1a;SQL Server 网络配…...

在 Visual Studio Code 中使用驭码 CodeRider 提升开发效率:以冒泡排序为例

目录 前言1 插件安装与配置1.1 安装驭码 CodeRider1.2 初始配置建议 2 示例代码&#xff1a;冒泡排序3 驭码 CodeRider 功能详解3.1 功能概览3.2 代码解释功能3.3 自动注释生成3.4 逻辑修改功能3.5 单元测试自动生成3.6 代码优化建议 4 驭码的实际应用建议5 常见问题与解决建议…...

客户案例 | 短视频点播企业海外视频加速与成本优化:MediaPackage+Cloudfront 技术重构实践

01技术背景与业务挑战 某短视频点播企业深耕国内用户市场&#xff0c;但其后台应用系统部署于东南亚印尼 IDC 机房。 随着业务规模扩大&#xff0c;传统架构已较难满足当前企业发展的需求&#xff0c;企业面临着三重挑战&#xff1a; ① 业务&#xff1a;国内用户访问海外服…...

向量几何的二元性:叉乘模长与内积投影的深层联系

在数学与物理的空间世界中&#xff0c;向量运算构成了理解几何结构的基石。叉乘&#xff08;外积&#xff09;与点积&#xff08;内积&#xff09;作为向量代数的两大支柱&#xff0c;表面上呈现出截然不同的几何意义与代数形式&#xff0c;却在深层次上揭示了向量间相互作用的…...

SFTrack:面向警务无人机的自适应多目标跟踪算法——突破小尺度高速运动目标的追踪瓶颈

【导读】 本文针对无人机&#xff08;UAV&#xff09;视频中目标尺寸小、运动快导致的多目标跟踪难题&#xff0c;提出一种更简单高效的方法。核心创新在于从低置信度检测启动跟踪&#xff08;贴合无人机场景特性&#xff09;&#xff0c;并改进传统外观匹配算法以关联此类检测…...

Linux【5】-----编译和烧写Linux系统镜像(RK3568)

参考&#xff1a;讯为 1、文件系统 不同的文件系统组成了&#xff1a;debian、ubuntu、buildroot、qt等系统 每个文件系统的uboot和kernel是一样的 2、源码目录介绍 目录 3、正式编译 编译脚本build.sh 帮助内容如下&#xff1a; Available options: uboot …...

【向量库】Weaviate 搜索与索引技术:从基础概念到性能优化

文章目录 零、概述一、搜索技术分类1. 向量搜索&#xff1a;捕捉语义的智能检索2. 关键字搜索&#xff1a;精确匹配的传统方案3. 混合搜索&#xff1a;语义与精确的双重保障 二、向量检索技术分类1. HNSW索引&#xff1a;大规模数据的高效引擎2. Flat索引&#xff1a;小规模数据…...

【Flask】:轻量级Python Web框架详解

什么是Flask&#xff1f; Flask是一个用Python编写的轻量级Web应用框架。它被称为"微框架"(microframework)&#xff0c;因为它核心简单但可扩展性强&#xff0c;不强制使用特定的项目结构或库。Flask由Armin Ronacher开发&#xff0c;基于Werkzeug WSGI工具包和Jin…...