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组件实现自定义上传
4107 0
|
编解码 Linux Android开发
安卓投屏神器 Scrcpy 安装与使用(支持 Mac、Windows、Linux)
安卓投屏神器 Scrcpy 安装与使用(支持 Mac、Windows、Linux)
54585 1
|
开发框架 JavaScript 小程序
uni-app——如何阻止事件冒泡
uni-app——如何阻止事件冒泡
1070 0
|
11月前
|
Ubuntu Linux 测试技术
Linux系统离线安装Docker完整指南
本文详细介绍在Ubuntu 24等Linux系统中离线安装Docker的完整流程,适用于内网隔离环境。涵盖安装包下载、`docker.service`配置、安装与卸载脚本编写、权限设置、镜像测试及用户组配置,并包含docker-compose的离线部署方法,助力高效完成生产环境搭建。
11497 4
Linux系统离线安装Docker完整指南
|
前端开发 JavaScript 应用服务中间件
前端跨域问题解决Access to XMLHttpRequest at xxx from has been blocked by CORS policy
跨域问题是前端开发中常见且棘手的问题,但通过理解CORS的工作原理并应用合适的解决方案,如服务器设置CORS头、使用JSONP、代理服务器、Nginx配置和浏览器插件,可以有效地解决这些问题。选择合适的方法可以确保应用的安全性和稳定性,并提升用户体验。
10043 90
|
NoSQL Java Redis
Springboot使用Redis实现分布式锁
通过这些步骤和示例,您可以系统地了解如何在Spring Boot中使用Redis实现分布式锁,并在实际项目中应用。希望这些内容对您的学习和工作有所帮助。
1571 83
|
JavaScript 前端开发
Element_文件上传&&多个文件上传
Element_文件上传&&多个文件上传
1653 0
|
资源调度 JavaScript API
【Vue2 / Vue3】 一个贼nb,贼强大的自定义打印插件
【Vue2 / Vue3】 一个贼nb,贼强大的自定义打印插件
14397 120
|
安全 开发工具 git
如何回滚Git中的提交?
如何回滚Git中的提交?
3613 0
|
XML JSON Java
springboot文件上传,单文件上传和多文件上传,以及数据遍历和回显
本文介绍了在Spring Boot中如何实现文件上传,包括单文件和多文件上传的实现,文件上传的表单页面创建,接收上传文件的Controller层代码编写,以及上传成功后如何在页面上遍历并显示上传的文件。同时,还涉及了`MultipartFile`类的使用和`@RequestPart`注解,以及在`application.properties`中配置文件上传的相关参数。
springboot文件上传,单文件上传和多文件上传,以及数据遍历和回显