vue-element-ui-文件上传ts版

文章目录

一、vue-element-ui-文件上传组件【Upload】ts版

一、vue-element-ui-文件上传组件【Upload】ts版

场景
- 在vue的项目中引用了element-ui，使用其上传文件的ui组件，调用后端接口，完成本地文件文件上传
官网解释
- https://element.eleme.io/#/zh-CN/component/upload
- 重点是官网下的属性参数

实现

注册Upload的UI组件

页面部分

<template><div><h1>测试页面</h1><el-uploadclass="upload-demo"ref="upload"action="":http-request="uploadFile":on-change="change":auto-upload="false"><el-button slot="trigger" size="small" type="primary">选取文件</el-button><el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button><div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div></el-upload></div></template>

这边只是简单的demo，如果需要更加复杂的自行改造，比如上传列表移出，样式改造等

ts逻辑部分

<script lang="ts">import {Component, Vue,
} from 'vue-property-decorator';import axios from 'axios';// 引入组件@Component({components: {}})
// @Component
export default class Test extends Vue {// 定义多文件数组private file4Upload: [];// 重写自定义提交uploadFile(file) {// 封装表单参数const formData = new FormData();formData.append('file', file.file);formData.append('userId', '123');formData.append('videoSeconds', '111');formData.append('videoWidth', '111');formData.append('videoHeight', '111');const config = {method: 'post', // 请求方式url: 'http://localhost:8081/video/upload', // 后端接口定义的请求的地址data: formData,headers: { 'Content-Type': 'multipart/form-data' }, // 配置header需要跟后端一致};// 提交请求axios(config);}// 如果是多文件上传可以使用该方案change(file) {// 文件流console.log(file.raw);this.file4Upload.push(file.raw);}// 按钮提交submitUpload() {this.$refs.upload.submit();}
}
</script>

axios未做封装，真实项目中，这部分需要单独封装处理
核心部分看注释即可，多个文件流的获取，单文件流的获取
:http-request的触发时机是调用 this.$refs.upload.submit();才会触发

vue-element-ui-文件上传ts版相关推荐

element ui 文件上传限制文件类型
问题描述: 限制文件的上传类型,在change事件或者是成功的回调函数中,做限判断会触发事件冒泡,并且无法删除页面上的展示列表中的文件解决方案: 在用户选择文件的时候就只能选择对应文件的类型实现方 ...
Vue element ui + AmazonS3上传文件功能
一.在上传之前,需要先获取到AWS的S3服务的Access key ID和Secret access key 二.代码代码: <template><div class="u ...
element ui视频上传（已上线，拿去即用）
element ui视频上传 + 进度条实现(拿去即用) 1.template 部分 2. script 部分 3. scss 部分 1.template 部分 <template>< ...
文件上传 java 完美,vue+java实现文件上传（excel等），会出现跨域问题，直接用form表单提交就不会有问题了（new FormData()）...
vue+java实现文件上传(excel等),会出现跨域问题,直接用form表单提交就不会有问题了(new FormData()) 地址:https://www.cnblogs.com/muscles ...
vue上传zip文件到服务器,vue.js zip文件上传
vue.js zip文件上传内容精选换一换开发过程中,您有任何问题可以在github上提交issue,或者在华为云对象存储服务论坛中发帖求助.接口参考文档详细介绍了每个接口的参数和使用方法.在O ...
vue自定义组件-文件上传后端接口
学习目标: vue自定义组件-文件上传后端接口学习内容: 准备工作: 后端环境:JAVA-Springboot项目数据库表(这里使用psql数据库):sys_file_record保存上传文件的信息 ...
vue+element实现图片上传及裁剪功能（vue-cropper）
需求背景: 上传图片或者头像时,能够将图片进行裁剪(等比例缩放裁剪或非等比例裁剪) 效果图: 安装使用 1.安装 npm install vue-cropper // npm 安装 yarn add ...
vue采用 XLSX文件上传与下载
vue采用 XLSX文件上传与下载先安装xlsx npm install xlsx 安装之后直接在该页面script标签里面导入 import * as XLSX from 'xlsx' 注意此处 ...
vue2 - 基于Element UI实现上传Excel表单数据功能
一.项目场景批量数据上传后台,需要从后台下载一个固定格式的 Excel表格,然后在表格里面添加数据,将数据格式化,再上传给后台,后台做解析处理,往数据库添加数据二.实现功能展示点击导入excel ...
SpringBoot+Vue+ElementUI实现文件上传与文件下载
作者: Memory(星哥) Wechat:/QQ: 574373426 整理不易,感谢支持,欢迎收藏转发分享专注IT职业教育多年,学编程找星哥 SpringBoot+Vue+ElementU ...

vue-element-ui-文件上传ts版

文章目录

一、vue-element-ui-文件上传组件【Upload】ts版

vue-element-ui-文件上传ts版相关推荐

最新文章

热门文章