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组件实现自定义上传
2424 0
|
3月前
|
固态存储 IDE 开发工具
电脑无法识别固态硬盘怎么办?
本文详解固态硬盘(SSD)无法被电脑识别的常见问题及解决方法。涵盖硬件连接、BIOS设置、系统识别、驱动安装等方面,适用于新手与老用户。分析四种常见识别失败情况,并提供排查步骤与解决方案,助你快速定位问题并修复。
|
12月前
|
前端开发 JavaScript API
2025年前端框架是该选vue还是react?有了大模型-例如通义灵码辅助编码,就不用纠结了!vue用的多选react,react用的多选vue
本文比较了Vue和React两大前端框架,从状态管理、数据流、依赖注入、组件管理等方面进行了详细对比。当前版本和下载量数据显示React更为流行,但Vue在国内用户量增长迅速。Vue 3通过组合式API提供了更灵活的状态管理和组件逻辑复用,适合中小型项目;React则更适合大型项目和复杂交互逻辑。文章还给出了选型建议,强调了多框架学习的重要性,认为技术问题已不再是选型的关键,熟悉各框架的最佳实践更为重要。
6882 1
|
人工智能 自然语言处理 搜索推荐
【知识图谱】人工智能之知识图谱的详细介绍
知识图谱(Knowledge Graph)作为一种新型的知识表示和组织方式,正逐渐成为信息领域的研究热点。以下是对知识图谱的详细介绍
1156 1
vue2 插槽(默认插槽 slot 、具名插槽 v-slot 、作用域插槽 slot-scope -- 插槽传值 )
vue2 插槽(默认插槽 slot 、具名插槽 v-slot 、作用域插槽 slot-scope -- 插槽传值 )
2550 1
element plus 上传图片到后端功能
element plus 上传图片到后端功能
356 0
|
资源调度 JavaScript 前端开发
「Vue3系列」Vue3起步/创建项目
在 Vue 3 中创建项目,通常使用 Vue CLI(命令行工具)来简化项目的初始化过程。Vue CLI 是一个强大的工具,它可以帮助你快速搭建 Vue.js 项目,并且内置了对 Vue Router、Vuex、CSS 预处理器、PWA 支持、单元测试等的集成。
737 1
|
JavaScript
vue开发过程中,修改了数据,但是页面死活不渲染改变!没变化!怎么办?6种方法解决~
vue开发过程中,修改了数据,但是页面死活不渲染改变!没变化!怎么办?6种方法解决~
|
JavaScript
JS严格校验身份证号-(严格校验每一位身份号码)
JS严格校验身份证号-(严格校验每一位身份号码)
609 0
|
数据可视化 数据挖掘 Go
GOplot|宝藏R包,拯救你的GO富集结果,杜绝平庸的条形图
`GOplot`是一款R包,专注于GO富集分析的可视化,提供多种图表类型如GOBar、GOBubble、GOCircle、GOChord和GOVenn等。这些函数允许用户轻松修改参数,定制颜色、大小和排序,实现数据的直观展示。示例代码展示了如何使用这些功能创建不同类型的图形,并提到了一个配套的shiny应用。`GOplot`简化了复杂的数据可视化过程,适合快速高效地展示差异分析结果。
577 0