ElementUI中的upload实现记录

element上传实现一种直接action,必选参数,上传的地址,String类型。一种可以自定义上传http-request,覆盖默认的上传行为,可以自定义上传的实现,就不用填写action。由于业务开发需要,选择自定义上传,代码如下:

                    
                        
                        
点击或将文件拖拽到这里上传
支持扩展名:.xls、.xlsx(仅支持1个文件)
          // 上传文件之前判断文件类型
            beforeUpload(file) {
                let isText = file.type === 'application/vnd.ms-excel'
                let isTextComputer = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
                return (isText | isTextComputer)
            },

            // 上传文件个数超过定义的数量
            handleExceed (files, fileList) {
                this.$message.warning(`当前限制选择 1 个文件,请删除后继续上传`)
            },

            uploadSuccess(file) {
                let formData = new FormData();
                formData.append("file", file.file);
                this.filesList = formData;

                this.fileName = file.file.name;

                let contents = {
                    'step':1,
                };
                return axios({
                    method: 'post',
                    url: `${api}/admin/XXXXX/import`,
                    headers : { 'AccessToken': getCookie("AccessToken") },
                    params: {
                        contents: aexEncrypt(contents)
                    },
                    data: this.filesList
                }).then(res => {
                    let data = JSON.parse(aesDecrypt(res.data.content));
                    if (data.code == 200) {

                    } else if (data.code == 201) {

                    } else if (data.code == 202) {
                        window.location.href = data.data.loginUrl
                    }
                }).catch(err => {
                    this.$message.error(err)
                });
            },

最后还需要提醒大家一点,本篇文章中的例子仅供参考学习,切误将本篇文章中的代码直接使用在正式项目当中。希望以上代码对大家有所帮助。

你可能感兴趣的:(ElementUI中的upload实现记录)