elementui_上传组件方法自定义(formData)

简介: elementui_上传组件方法自定义(formData)

效果

Attribute使用方式

方法 说明 l类型 默认
on-remove 文件列表移除文件时的钩子 function(file, fileList) — —
on-success 文件上传成功时的钩子 function(response, file, fileList) — —
on-error 文件上传失败时的钩子 function(err, file, fileList)
on-progress 文件上传时的钩子 function(event, file, fileList) — —
on-change 文件状态改变时的钩子,添加文件、上传成功和上传失败时都会被调用 function(file, fileList) — —
before-upload 上传文件之前的钩子,参数为上传的文件,若返回 false 或者返回 Promise 且被 reject,则停止上传。 function(file) — —
before-remove 删除文件之前的钩子,参数为上传的文件和文件列表,若返回 false 或者返回 Promise 且被 reject,则停止删除。 function(file, fileList) — —
list-type 文件列表的类型 string text/picture/picture-card text

auto-upload(关闭自定义上传)

auto-upload:false

关闭自定义上传

代码块

<template>
    <div class="upload-container">
<!--      文件上传 先关闭自动上传-->
      <div class="upload-container-box">
       <template>
<!--         :action="uploadForm.uploadUrl"-->
        <el-upload
          class="upload-demo"
          :accept="uploadForm.accept"
          ref="uploadRef"
          drag
          :onRemove="handleRemove"
          :onChange="handlChange"
          :beforeUpload="beforeUpload"
          :action="uploadForm.uploadUrl"
          :autoUpload="false"
          :fileList="uploadForm.fileList"
          list-type="picture"
          :httpRequest="designUpload"
          >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">只能上传单个png、jpg文件,且不超过500kb!</div>
        </el-upload>
         <div style="text-align: center">
           <el-button type="primary" plain @click="submitBtn" style="margin-top:10px">上传到服务器</el-button>
         </div>
</template>
      </div>
    </div>
</template>
<script>
//上传逻辑自己写
import axios from "axios";
export default {
  name: "Upload",
  data() {
    const uploadTypeForm = {
      text: ["jpg", "png", "jpeg", "svg"]
    };
    return {
      uploadForm: {
        accept: uploadTypeForm.text.join(","),
        uploadUrl: "", //上传的url 默认空
        fileList: []
      }
    };
  },
  methods: {
    /**
     * 文件删除回调
     */
    handleRemove(file, fileList) {
      this.uploadForm.fileList = fileList;
    },
    /**
     * 选择文件时回调
     */
    handlChange(file, fileList) {
      this.uploadForm.fileList = fileList;
    },
    //上传前的回调
    beforeUpload: function(file) {
      console.info("上传前的钩子", file);
    },
    submitBtn() {
      if (this.uploadForm.fileList.length <= 0) {
        this.$message({
          message: "请先选择文件!",
          type: "error"
        });
      }
      this.$refs.uploadRef.submit(); //触发自定义上传
    },
    //自定义上传  //  自己对接后端逻辑
    designUpload(params) {
      console.info("自定义上传", params);
      const that = this;
      const formData = new FormData();
      formData.append("file", params.file);
      const header = {
        "Content-Type": "mutipart/form-data"
      };
      const upLoadUrl = "https://jsonplaceholder.typicode.com/posts/"; //上传服务器的接口对接
      axios({
        url: upLoadUrl,
        method: "post",
        data: formData,
        headers: header
      })
        .then(res => {
          console.info("res", res);
          params.onSuccess(); //成功icon
          that.$message({
            message: "上传成功!",
            type: "success"
          });
        })
        .catch(r => {
          that.$message.error("上传失败!");
          throw Error(r);
        });
    }
  }
};
</script>
<style scoped>
.upload-container {
  position: relative;
  width: 100%;
  height: 100%;
}
.upload-container-box {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
</style>

效果

选择文件

失败

成功

传递formdata参数

起风了


目录
相关文章
|
前端开发 JavaScript 安全
【前端相关】elementui使用el-upload组件实现自定义上传
【前端相关】elementui使用el-upload组件实现自定义上传
2424 0
|
编解码 开发框架 Java
Unity 之 打包参数 -- Player面板属性详解
Unity Project Setting Player面板详解,看完这篇文章,彻底搞懂各个选项设置实际作用。
2917 0
Unity 之 打包参数 -- Player面板属性详解
|
对象存储
阿里云OSS 服务端签名后直传之分片上传(结合element-ui的upload组件)
阿里云OSS 服务端签名后直传之分片上传(结合element-ui的upload组件)
822 0
|
前端开发
antd中table组件中如何进行换行操作(react中)
antd中table组件中如何进行换行操作(react中)
antd中table组件中如何进行换行操作(react中)
|
7月前
|
Java API 开发者
微服务——SpringBoot使用归纳——Spring Boot使用slf4j进行日志记录——slf4j 介绍
在软件开发中,`System.out.println()`常被用于打印信息,但大量使用会增加资源消耗。实际项目推荐使用slf4j结合logback输出日志,效率更高。Slf4j(Simple Logging Facade for Java)是一个日志门面,允许开发者通过统一方式记录日志,无需关心具体日志系统。它支持灵活切换日志实现(如log4j或logback),且具备简洁占位符和日志级别判断等优势。阿里巴巴《Java开发手册》强制要求使用slf4j,以保证日志处理方式的统一性和维护性。使用时只需通过`LoggerFactory`创建日志实例即可。
472 0
|
7月前
|
负载均衡 JavaScript 前端开发
分片上传技术全解析:原理、优势与应用(含简单实现源码)
分片上传通过将大文件分割成多个小的片段或块,然后并行或顺序地上传这些片段,从而提高上传效率和可靠性,特别适用于大文件的上传场景,尤其是在网络环境不佳时,分片上传能有效提高上传体验。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
JavaScript 前端开发
Element_文件上传&&多个文件上传
Element_文件上传&&多个文件上传
740 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
|
JavaScript
vue element upload组件配合axios实现用 “Content-Type“: “multipart/form-data“上传方式导入xls文件
vue element upload组件配合axios实现用 “Content-Type“: “multipart/form-data“上传方式导入xls文件
|
机器学习/深度学习 自然语言处理 算法