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参数

起风了


目录
相关文章
|
6月前
|
前端开发
前端通过input标签封装Upload组件实现文件上传
前端通过input标签封装Upload组件实现文件上传
226 0
|
6月前
|
JSON JavaScript 前端开发
【form-generator在线表单生成---vue父组件调用vue弹框组件】
【form-generator在线表单生成---vue父组件调用vue弹框组件】
202 1
|
前端开发 JavaScript 安全
【前端相关】elementui使用el-upload组件实现自定义上传
【前端相关】elementui使用el-upload组件实现自定义上传
771 0
|
JSON 数据格式
layui富文本编辑器文档layedit组件的调用和图片上传接口的使用
layui富文本编辑器文档layedit组件的调用和图片上传接口的使用
443 0
|
6月前
|
资源调度 JavaScript 前端开发
vue2_二次封装a-upload组件,自定义上传预览
vue2_二次封装a-upload组件,自定义上传预览
417 0
|
前端开发
Vue3 element-ui el-upload(上传组件) 上传图片后,隐藏上传按钮
Vue3 element-ui el-upload(上传组件) 上传图片后,隐藏上传按钮
442 0
|
4月前
uniCloud + uView 上传图片,删除图片(含u-upload 组件的使用)
uniCloud + uView 上传图片,删除图片(含u-upload 组件的使用)
178 0
|
6月前
|
JavaScript
【vue】 element upload文件上传后表单校验信息还存在
【vue】 element upload文件上传后表单校验信息还存在
240 1
|
6月前
封装element-plus上传图片组件
v封装element-plus上传图片组件
|
JavaScript
vue中使用上传图片组件后上传接口的方法
vue中使用上传图片组件后上传接口的方法
45 0