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

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


<!-- 导入---------------------------------------- -->
<!--注意: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则停止上传
    }
}


目录
打赏
0
1
1
0
73
分享
相关文章
在vue前端开发中基于refreshToken和axios拦截器实现token的无感刷新
在vue前端开发中基于refreshToken和axios拦截器实现token的无感刷新
280 4
vue尚品汇商城项目-day02【11.对axios二次封装+12.接口统一管理】
vue尚品汇商城项目-day02【11.对axios二次封装+12.接口统一管理】
51 0
【Vue面试题二十五】、你了解axios的原理吗?有看过它的源码吗?
这篇文章主要讨论了axios的使用、原理以及源码分析。 文章中首先回顾了axios的基本用法,包括发送请求、请求拦截器和响应拦截器的使用,以及如何取消请求。接着,作者实现了一个简易版的axios,包括构造函数、请求方法、拦截器的实现等。最后,文章对axios的源码进行了分析,包括目录结构、核心文件axios.js的内容,以及axios实例化过程中的配置合并、拦截器的使用等。
【Vue面试题二十五】、你了解axios的原理吗?有看过它的源码吗?
【Vue面试题二十七】、你了解axios的原理吗?有看过它的源码吗?
文章讨论了Vue项目目录结构的设计原则和实践,强调了项目结构清晰的重要性,提出了包括语义一致性、单一入口/出口、就近原则、公共文件的绝对路径引用等原则,并展示了单页面和多页面Vue项目的目录结构示例。
vue 中 axios 的安装及使用
本文介绍了在Vue项目中安装和使用axios的方法。首先通过命令`npm install axios --save-dev`安装axios,然后在组件的`created`生命周期钩子中使用`axios.get`异步获取数据,并将获取的数据更新到组件的`data`中。文中提供了完整的示例代码,包括安装命令、验证安装成功的步骤、Vue组件的模板、脚本和样式。
vue 中 axios 的安装及使用
Vue框架中Ajax请求的实现方式:使用axios库或fetch API
选择 `axios`还是 `fetch`取决于项目需求和个人偏好。`axios`提供了更丰富的API和更灵活的错误处理方式,适用于需要复杂请求配置的场景。而 `fetch`作为现代浏览器的原生API,使用起来更为简洁,但在旧浏览器兼容性和某些高级特性上可能略显不足。无论选择哪种方式,它们都能有效地在Vue应用中实现Ajax请求的功能。
83 4

热门文章

最新文章

  • 1
    Vue中的axios深度探索:从基础安装到高级功能应用的全面指南
    157
  • 2
    JavaScript 使用axios库发送 post请求给后端, 给定base64格式的字符串数据和一些其他参数, 使用表单方式提交, 并使用onUploadProgress显示进度
    589
  • 3
    若依修改,若依如何发送请求---王清江07,axios的请求在request.js文件中,若依发送GET请求,必须用param
    260
  • 4
    axios发送post请求,如何接受和返回一个axios的字段,解决bug的方法,困难的事情先从简单做起,先从发送一个axios的post请求做起,解决方法查别人的资料,查看F12看network就行
    58
  • 5
    文本,前后端数据交互,简单请求,如何去给data数据赋值,在mounted()里赋值,利用axios发送的请求,res就是数据集,就是后端的数据,this.users = res.data.data
    57
  • 6
    Request failed with status code 400,使用axios.post要发送参数,认真比对原项目,看看有没有忘记什么?
    135
  • 7
    vue3 在 watchEffect 里中断未完成的 axios 请求(只保留最后一次请求的方法---连续点击查询按钮的优化)
    174
  • 8
    前后端数据交互.js文件的axios的写法,想要往后端发送数据,页面注入API,await的意思是同步等待服务器数据,并返回,axios注入在其他页面,其他页面调用的时候,同步作用
    67
  • 9
    前后端数据交互,API风格组合式API和选项式API,setup是一个标识,组合式编写的意思,使定义count.value的值自增的写法,组合式API使用axios的写法,ref定义响应数据写法
    45
  • 10
    网页设计,若依项目修改(It must be done)02------axios封装后发get请求,axios请求的位置在呢?
    62