vue element upload组件配合axios实现用 “Content-Type“: “multipart/form-data“上传方式导入xls文件

原创已于 2023-06-04 14:14:03 修改 · 6.6k 阅读

2 ·

CC 4.0 BY-SA版权

随意拷贝莫问题，但是有一点！请务必备注“你挚爱的强哥出品~么么哒”！

文章标签：

#vue.js #javascript #ecmascript

于 2021-06-14 23:54:25 首次发布

Vue.js 同时被 2 个专栏收录

306 篇文章

订阅专栏

Sg.js框架

235 篇文章

订阅专栏

本文介绍了如何使用Element UI的el-upload组件进行文件上传操作，包括设置headers、action属性、before-upload回调以及自定义上传按钮样式。在文件上传前进行了文件类型和大小的验证，并通过模拟加载显示进度。当满足条件时，利用axios以form-data方式将文件发送到后台。同时，展示了处理成功和失败的响应。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!-- 导入---------------------------------------- -->
<!--注意：action属性是必填项了，这里要加上去，只是在上传过程会报一个错-->
<el-upload
    action
    :show-file-list="false"
    :headers="headers" 
    :action="actionUrl" 
    :before-upload="beforeFileUpload"
    :disabled="percent < 100"
>
    <el-button
            type="success"
            icon="el-icon-upload"
            :loading="percent < 100"
    >{{ 100 > percent ? percent + "%" : "导入" }}</el-button>
    
</el-upload>

<!-- ---------------------------------------- -->

样式_________________________________________________________
 
// 上传按钮禁用状态----------------------------------------
>>>.el-upload {
    cursor: not-allowed;
}


data() {
  return {
    // 上传----------------------------------------
    headers: {
          token: localStorage.token, //获取token(注意仔细看后端接受token的字段名是不是叫做“token”)
    },
    actionUrl: "https://xxx.com/import",
    fmt: ["xls", "xlsx"],
    dur: 100,
    percent: 100,
    // ----------------------------------------
},
methods: {
    // 上传文件----------------------------------------------------------------
    showFakeLoading() {
        this.interval && clearInterval(this.interval);
        this.percent = 0;
        this.interval = setInterval(() => {
            this.percent++;
            this.percent >= 99 && clearInterval(this.interval);
        }, this.dur);
    }
    ,
    hideFakeLoading() {
        this.interval && clearInterval(this.interval);
        this.percent = 100;
    },
    //文件上传之前
    beforeFileUpload(file, id) {
        // 判断是不是特定的格式________________________
        let isFile = this.fmt.includes(file.name.toLocaleLowerCase().split(".").pop());
        const maxSize = 50; //限制大小
        const isAllowSize = file.size / 1024 / 1024 <= maxSize;
        isFile || this.$message.error("上传文件只能是" + this.fmt + "格式");
        isAllowSize || this.$message.error("上传文件大小不能超过" + maxSize + "MB");
        let allowUpload = isFile && isAllowSize;
        allowUpload && this.showFakeLoading(); //虚假加载

        if (allowUpload) {
            // 为了实现form-data方式上传文件----------------------------------------
            let formData = new FormData();
            formData.append("file", file);//注意这个位置的一般后端会用file，一般情况不要修改
            this.$axios
                .post(this.actionUrl, formData, {
                    headers: {"Content-Type": "multipart/form-data"}
                })
                .then((d) => {
                    this.$message.success(`文件“${file.name}”导入成功`);
                    this.hideFakeLoading();//停止加载
                    this.initList();//刷新列表
                })
                .catch((d) => {
                    this.$message.error("文件导入失败，请稍后再试！");
                    console.log(d);
                });
            // ----------------------------------------
        }

        return allowUpload; //若返回 false则停止上传
    }
}

elementUI el-upload上传组件实战使用_你挚爱的强哥的博客-CSDN博客- 导入---------------------------------------- -->https://blog.csdn.net/qq_37860634/article/details/131030401