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)
                });
            },

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