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>
目录
相关文章
|
5月前
|
前端开发
前端通过input标签封装Upload组件实现文件上传
前端通过input标签封装Upload组件实现文件上传
196 0
|
12月前
|
前端开发 JavaScript 安全
【前端相关】elementui使用el-upload组件实现自定义上传
【前端相关】elementui使用el-upload组件实现自定义上传
634 0
|
前端开发 JavaScript
使用Element-UI中的el-upload实现文件的上传demo(亲测有用)
使用Element-UI中的el-upload实现文件的上传demo(亲测有用)
|
前端开发 Java 程序员
el-upload上传组件accept属性限制文件类型(案例详解)
案例分享el-upload上传组件accept属性!欢迎留言沟通交流!
3586 0
el-upload上传组件accept属性限制文件类型(案例详解)
|
API
Element UI Loading 加载组件动态变更 text 值(加载文案)
有这样的一个需求,我在上传文件的时候,上传阶段耗时较长,所以利用加载动画作为友好提示用户等待。
1165 0
Element UI Loading 加载组件动态变更 text 值(加载文案)
|
2月前
|
前端开发
ElementUI——el-upload上传前校验图片宽高
ElementUI——el-upload上传前校验图片宽高
29 0
|
前端开发
Vue3 element-ui el-upload(上传组件) 上传图片后,隐藏上传按钮
Vue3 element-ui el-upload(上传组件) 上传图片后,隐藏上传按钮
409 0
|
3月前
|
JSON JavaScript 数据格式
文本-----wangEditor的使用,设置和获取内容,展示HTML无样式怎么办????console同步展示怎样写,Vue的配置在Vue3配置文件中的配置,是editor中的v-model绑定的值
文本-----wangEditor的使用,设置和获取内容,展示HTML无样式怎么办????console同步展示怎样写,Vue的配置在Vue3配置文件中的配置,是editor中的v-model绑定的值
|
5月前
|
前端开发
elementui_上传组件方法自定义(formData)
elementui_上传组件方法自定义(formData)
39 1
|
5月前
|
JavaScript
【vue】 element upload文件上传后表单校验信息还存在
【vue】 element upload文件上传后表单校验信息还存在
150 1