element使用el-upload组件实现自定义方法上传图片或者文件(配有详细注释)

简介: element使用el-upload组件实现自定义方法上传图片或者文件(配有详细注释)
<template><el-upload    :headers="headers"action="##"    :http-request="uploadServerLog"><el-buttonsize="small"type="primary">上传</el-button></el-upload></template><script>// upload为自己业务的后端上传接口,自行更换import {upload} from"@/api/terminalApplication";
exportdefault {
data() {
return {}
        },
//  需要获取tokencomputed: {
headers() {
return {
'Authorization': 'Bearer '+this.$store.state.user.token// 直接从本地获取token就行            };
          }
        },
methods: {
// uploadServerLog方法 是页面中 el-upload 组件 :http-request所绑定的方法;uploadServerLog(params) {
constfile=params.file;
// 根据后台需求数据格式constform=newFormData();
// 文件对象form.append('file', file);
// 本例子主要要在请求时添加特定属性,所以要用自己方法覆盖默认的action// 将form作为参数传给后台上传接口即可upload(form).then(res=> {
console.log(res)
            }).catch(err=> {
console.log(err);
            });
          },
        }
    }
</script>
目录
相关文章
|
前端开发 JavaScript 安全
【前端相关】elementui使用el-upload组件实现自定义上传
【前端相关】elementui使用el-upload组件实现自定义上传
3496 0
|
索引
UniApp 组件 u-tabs 详细讲解
UniApp 组件 u-tabs 详细讲解
3069 1
|
JavaScript 前端开发
js比较2个版本号大小
js比较2个版本号大小
966 1
|
存储 NoSQL Java
SpringBoot 中使用 MongoDB 基于 MongoRepository增删改查(基础篇)
SpringBoot 中使用 MongoDB 基于 MongoRepository增删改查(基础篇)
1371 0
|
12月前
|
NoSQL Java Redis
Springboot使用Redis实现分布式锁
通过这些步骤和示例,您可以系统地了解如何在Spring Boot中使用Redis实现分布式锁,并在实际项目中应用。希望这些内容对您的学习和工作有所帮助。
1239 83
|
JavaScript 前端开发
Element_文件上传&&多个文件上传
Element_文件上传&&多个文件上传
1190 0
|
机器学习/深度学习 前端开发 JavaScript
WebAssembly:让前端性能突破极限的秘密武器
WebAssembly(简称 WASM)作为前端开发的性能加速器,能够让代码像 C++ 一样在浏览器中高速运行,突破了 JavaScript 的性能瓶颈。本文详细介绍了 WebAssembly 的概念、工作原理以及其在前端性能提升中的关键作用。通过与 JavaScript 的配合,WASM 让复杂运算如图像处理、3D 渲染、机器学习等在浏览器中流畅运行。文章还探讨了如何逐步集成 WASM,展示其在网页游戏、高计算任务中的实际应用。WebAssembly 为前端开发者提供了新的可能性,是提升网页性能、优化用户体验的关键工具。
6762 2
WebAssembly:让前端性能突破极限的秘密武器
|
存储 JavaScript 前端开发
Vue3权限控制全攻略:路由与组件层面的用户角色与权限管理方法深度解析
Vue3权限控制全攻略:路由与组件层面的用户角色与权限管理方法深度解析
1524 2