VUE3+ElementPlus如何实现文件上传

使用elementplus 中的组件 el-upload

以上传单张图片为例：

使用el-upload

<el-uploadref="uploadFile"action='#':http-request="uploadAction":on-exceed="handleExceed":limit="1":show-file-list="false":auto-upload="true":before-upload="beforeUpload" style="width: 100%;" class="left-view"><img v-if="bannerUrl" :src="bannerUrl" class="avatar" /><el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
</el-upload>

ts实现

<script lang="ts">
import { defineComponent, reactive, toRefs, ref } from 'vue';
import type { UploadRawFile, UploadFile, FormInstance, Action } from 'element-plus';
import { ElMessage, ElMessageBox } from 'element-plus';
import { uploadImage } from '../../apis/project';
export default defineComponent({name: 'BanaerManage',components: {},setup() {const uploadFile = ref();const state = reactive({bannerUrl: '',fileList: [],fileName: '',})const handleExceed = (files: File[], fileList: UploadFile[]) => {if (state.fileList.length >= 1) {ElMessage.error('只能上传一个图片')return;}}const beforeUpload = (file: UploadRawFile) => {const type = ['image/jpeg', 'image/jpg', 'image/png']if (type.indexOf(file.type) === -1) {ElMessage.error('上传的文件必须是JPG、JPEG、PNG三种之一!')return false} else if (file.size / 1024 / 1024 > 2) {ElMessage.error('图片大小不能超过2MB!')return false}return true}const uploadAction = (option: any) => {let param = new FormData();param.append('file', option.file);uploadImage(param).then((res: any) => {if (res && res.code === 0) {state.fileName = res.data.fileName;state.bannerUrl = res.data.imageUrl;ElMessage.success('图片上传成功！');} else {if (res && res.msg) {ElMessage.error(res.msg);} else {ElMessage.error('图片上传失败！');}}})}return {...toRefs(),uploadFile,uploadAction,beforeUpload,handleExceed}}
})

简单实现场景，服务端我是用nodejs实现的，后面给大家更新一下nodejs+koa2实现如何接收文件

谢谢

VUE3+ElementPlus如何实现文件上传相关推荐

Vue3 + ElementPlus 前端实现分片上传
目录 1. 什么是分片上传 2. 上传组件模板 3. 上传组件逻辑 3.1 基本思路 3.2 选择上传文件 3.3 校验文件是否合法 3.4 文件加密 3.5 合并文件 3.6 文件切片上传 4. 参 ...
vue3+ts+vite+elementPlus实现文件上传导入excle给后端，并且清空上传文件后的列表，以及formData变成[object FormData]的解决方法
一.文件上传 1.首先我们文件上传的方法用到的是multipart/form-data,它是基于post方法来传递数据的,需求是实现类似与这样的:来一个弹框实现两个excel的文件导入 2.用vue的 ...
vue3 封装文件上传组件
由于工作需要,项目中经常需要文件上传这个功能,根据业务的需求,使用vue3 简单封装通用型组件. 作用:主要是用来上传图片的一个通用型组件,当然可以上传文件.支持校验尺寸 , 像素, 文件大小,可以 ...
vue3实现文件上传
我们要实现如下图所示效果 <template><div class="form-tr" v-for="(item, index) in fileInfo ...
文件上传、切片上传、秒传等
切片上传与秒传方案总览理解的方案对比一次性文件上传切片上传额外话题总览浏览器情况下: 针对大文件上传,一次性传输文件会出现网络中断等情况.不会传输成功. 把大文件切分成多个二进制流格式切 ...
Element_文件上传多个文件上传
官网:https://element-plus.gitee.io/zh-CN/component/upload.html 单个文件上传 <template> <el-uploadre ...
前端大文件上传和下载（分片上传）
前端大文件上传和下载(分片上传) 一.问题日常业务中难免出现前端需要向后端传输大型文件的情况,这时单次的请求不能满足传输大文件的需求,就需要用到分片上传业务需求为:用户可以上传小于20G的镜像文件 ...
springboot设置文件上传大小（tomcat默认1M）
application.yml # 设置文件上传大小(tomcat默认1M) server:tomcat:max-http-form-post-size: -1 spring:servlet:mult ...
将文件上传至ftp服务器，FTP文件上传工具类，将文件上传至服务器指定目录
将文件上传至ftp服务器,传入File对象,将文件上传至ftp服务器需要配置修改的点: 1. 服务器ip端口(服务器ip 端口22/21). 2. 服务器账号密码(服务器登录用户名密码). 3. 上 ...

VUE3+ElementPlus如何实现文件上传

VUE3+ElementPlus如何实现文件上传相关推荐

最新文章

热门文章