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组件实现自定义上传
831 0
|
前端开发 JavaScript
使用Element-UI中的el-upload实现文件的上传demo(亲测有用)
使用Element-UI中的el-upload实现文件的上传demo(亲测有用)
|
前端开发 Java 程序员
el-upload上传组件accept属性限制文件类型(案例详解)
案例分享el-upload上传组件accept属性!欢迎留言沟通交流!
3755 0
el-upload上传组件accept属性限制文件类型(案例详解)
|
前端开发
Vue3 element-ui el-upload(上传组件) 上传图片后,隐藏上传按钮
Vue3 element-ui el-upload(上传组件) 上传图片后,隐藏上传按钮
460 0
|
3月前
|
前端开发
ElementUI——el-upload上传前校验图片宽高
ElementUI——el-upload上传前校验图片宽高
50 0
|
6月前
|
JavaScript
【vue】 element upload文件上传后表单校验信息还存在
【vue】 element upload文件上传后表单校验信息还存在
269 1
|
JavaScript
vue中关于element的el-image 图片预览功能增加一个下载按钮
vue中关于element的el-image 图片预览功能增加一个下载按钮
926 0
|
前端开发 数据格式
vue+element-plus上传图片功能以及回显问题还有数量限制
vue+element-plus上传图片功能以及回显问题还有数量限制
410 0
|
6月前
element el-upload上传图片完成后隐藏上传
element el-upload上传图片完成后隐藏上传
313 0
|
6月前
|
前端开发 JavaScript Linux
[React] 实现点击Button将文件名赋值Input
[React] 实现点击Button将文件名赋值Input