vue中使用axios 结合element-ui 山川组件,上传文件

vue中使用axios 结合element-ui 山川组件,上传文件

最近接到一个需求,需要做一个上传文件和下载文件的功能,主要使用的场景是用户上传文件,和下载样例文件,上传和下载的请求都需要带上 请求头 token,主要使用:axios,element的上传组件进行自定义上传;主要操作代码如下:

上传文件

	<el-upload
            class="upload-demo"
            ref="uploadFilder"
            :action="uploadUrl"
            :headers="uploadHeader"
            :on-change="addFile"
            :file-list="fileList"
            accept=".json"
            :before-upload="beforeUpload"
            :limit="1"
            :auto-upload="false"
            :on-success="uploadSuccess"
            >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传.json后缀的文件</div>
     </el-upload>

只要使用的几个属性有

上传组件的绑定值 定义在 vue data 中 fileList:[];
请求地址和请求头变量都在 computed中定义:

computed: {
        uploadUrl: function () {
            return baseUrl + this.folderId; 
            // 返回基础的请求地址和文件夹id拼接的请求地址
            // 实例:   "/upload/huejiw95ec16147a3965b9f";
        },
        // 上传的文件请求头,如果不需要请求头,可以不设置这个属性
        uploadHeader: function () {
            if (authorization) {
             // authorization是一个全局变量,挂载在window上的
                return {
                    Authorization: "Bearer " + authorization.token,
                };
            } else return {};
        }
    }

方法的处理

methods:{
	addFile(file, fileList) {
            this.fileList = fileList;
            // 这里我没有做文件上传大小的处理
        },
    beforeUpload(file) {
            let fileName = file.name.substring(file.name.lastIndexOf(".") + 1);
            const fileName1 = fileName === "json";
            if (!fileName1) {
                this.$message({
                    message: "上传文件只能是 .json格式!",
                    type: "warning",
                });
            }
            // 以上是对文件格式的筛选,如果 el-upload组件 配置了accept 属性的话就可以不用做以上的判断处理
            return fileName1;
        },
        // 上传成功的处理,这里长传成功之后需要关闭弹框
        uploadSuccess(res, file, fileList) {
            if (res.code == 200) {
                this.$message({
                    message: "上传文件成功!",
                    type: "success",
                });
                this.dialogShow = false;
            } else {
                this.$message({
                    message: "上传文件失败!",,
                    type: "error",
                });
                this.$refs.uploadFilder.clearFiles(); // 清空组件的文件
            }
            this.fileList = []; // 清空绑定数据
        },
   },
   

以上操作就可以完成自定义的文件上传
注意:

1. 自定义文件上传 需要 将auto-upload属性设置为 false
2. 必须配置 action 属性
3. change事件里面的赋值操作,确保文件被正确获取并提交,实际上配置了file-list执行也可以不需要再重新赋值

element-ui 的上传组件的详细使用文档可以参考 element-ui 官方文档

本文章是以记录为出发点,如果有说的不正确的地方,还希望大家可以指出来,大家共同进步!!!