ElementUI中的upload实现记录

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

                    <el-upload
                            ref="upload"
                            class="uploadAssets"
                            drag
                            action=""
                            :http-request="uploadSuccess"
                            :limit="1"
                            accept=".xls,.xlsx"
                            :before-upload="beforeUpload"
                            :show-file-list="showFileList"
                            :on-exceed="handleExceed">
                        <i class="el-icon-receiving"></i>
                        <div class="el-upload__text">点击或将文件拖拽到这里上传<br/>支持扩展名:.xls、.xlsx(仅支持1个文件)</div>
                    </el-upload>
          // 上传文件之前判断文件类型
            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)
                });
            },

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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一. Java基础部分.................................................
    wy_sure阅读 3,838评论 0 11
  • 国家电网公司企业标准(Q/GDW)- 面向对象的用电信息数据交换协议 - 报批稿:20170802 前言: 排版 ...
    庭说阅读 11,184评论 6 13
  • 《诗经》作为中国现实主义文学的源头,对中国后世的文学创作和文学风格产生了非常深远的影响。今天,飞鸿为大家解读另外一...
    上官飞鸿阅读 1,006评论 9 14
  • 那一晚 城里的咖啡屋 飘来乡村的味道 暧昧的霓虹灯 舞起欢快的节奏 起起伏伏的山峰 拽来柔曼的月光 一弯湖水 倾听...
    一杯老酒阅读 646评论 30 21
  • 长安城里,人潮熙攘,一眼望去,尽是繁华。 你坐在烟纱朦胧轿子上,一旁的侍女轻轻打着罗扇,恬静而优雅。忽的吹来一阵...
    珺丫帧子阅读 394评论 0 2