elementui_上传组件方法自定义（formData）-阿里云开发者社区

elementui_上传组件方法自定义（formData）

2024-04-25 39

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 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>