element使用el-upload组件实现自定义方法上传图片或者文件

简介: element使用el-upload组件实现自定义方法上传图片或者文件
<template>
  <el-upload
    :headers="headers"
    action="##"
    :http-request="uploadServerLog"
  >
    <el-button size="small" type="primary">上传</el-button>
  </el-upload>
</template>
<script>
    // upload为自己业务的后端上传接口,自行更换
    import {upload} from "@/api/terminalApplication";
    export default {
        data() {
            return {}
        },
        //  需要获取token
        computed: {
          headers() {
            return {
              'Authorization': 'Bearer ' + this.$store.state.user.token // 直接从本地获取token就行
            };
          }
        },
        methods: {
          // uploadServerLog方法 是页面中 el-upload 组件 :http-request所绑定的方法;
          uploadServerLog(params) {
            const file = params.file;
            // 根据后台需求数据格式
            const form = new FormData();
            // 文件对象
            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
|
前端开发
前端通过input标签封装Upload组件实现文件上传
前端通过input标签封装Upload组件实现文件上传
433 0
|
前端开发 JavaScript
使用Element-UI中的el-upload实现文件的上传demo(亲测有用)
使用Element-UI中的el-upload实现文件的上传demo(亲测有用)
|
4月前
|
Web App开发 监控 安全
OSS客户端签名直传实践:Web端安全上传TB级文件方案(含STS临时授权)
本文深入解析了客户端直传技术,涵盖架构设计、安全机制、性能优化等方面。通过STS临时凭证与分片上传实现高效安全的文件传输,显著降低服务端负载与上传耗时,提升系统稳定性与用户体验。
444 2
|
3月前
|
存储 JavaScript 前端开发
element ui <el-date-picker> 设置展示当前月
在 Element UI 中,使用 `el-date-picker` 的 `value-format` 属性可将日期值格式化为指定字符串。设置 `type=&quot;month&quot;` 时,绑定值默认为 Date 对象,通过 `value-format=&quot;yyyy-MM&quot;` 可将其转为如 &quot;2023-05&quot; 格式,便于存储与处理。
783 0
|
存储 前端开发 Java
Element el-upload 文件上传/图片上传/拖拽上传/附带参数/附带请求头部详解
文目录 1. 前言 2. 基本用法 2.1 前端部分 2.2 后端部分 2.3 获取后端返回信息 3. 外观功能介绍 3.1 拖拽上传 3.2 显示图片 3.3 设置文件列表样式 3.4 显示提示信息 4. 事件功能介绍 4.1 限制上传文件数量 4.2 限制上传文件类型和大小 4.3 移除文件处理 4.4 手动上传 5. 附带参数 6. 附带请求头部 7. 小结
7207 0
Element UI 上传文件 el-upload —— 手动上传文件,限制上传文件数量,文件类型校验等
Element UI 上传文件 el-upload —— 手动上传文件,限制上传文件数量,文件类型校验等
3331 0
|
前端开发
elementui_上传组件方法自定义(formData)
elementui_上传组件方法自定义(formData)
209 1
|
存储 JavaScript 前端开发
TypeScript 中的 Map 对象定义、基本操作和常见用法
TypeScript 中的 Map 对象定义、基本操作和常见用法
1206 7