vue2 element-ul 上传

摸鱼小扒菜

已于 2023-04-03 16:02:28 修改

阅读量269

点赞数

CC 4.0 BY-SA版权

文章标签： javascript vue.js 前端

于 2023-04-03 15:39:31 首次发布

本文链接：https://blog.csdn.net/Zz_Qdm/article/details/129930943

1.html

 <el-upload :data={portraitId:peoFile.id} multiple :action="uploadFileUrl"
                            :before-upload="handleBeforeUpload" :on-error="handleUploadError"
                            :on-success="handleUploadSuccess" :show-file-list="false" :headers="headers"
                            class="upload-file-uploader" ref="upload">
                            <el-button size="mini" type="primary">上传文件</el-button>
                        </el-upload>

2.js

//若依系统引入token
import { getToken } from "@/utils/auth";
//data里面定义上传地址，请求投加上token
 headers: {
                Authorization: "Bearer " + getToken(),
            },
  uploadFileUrl: process.env.VUE_APP_BASE_API + "/xxxxxxx/xxxxxxxx", // 上传的图片服务器地址  
//在data里面定义上传文件的格式以作为判断
fileType: ["pdf", "doc", "docx", "ppt", "pptx", "xls", "xlsx", 'png', 'jpg', 'jpeg', 'txt', 'zip', 'rar', '7z'],
 // 上传前校检格式和大小
        handleBeforeUpload(file) {
            // 校检文件大小
            let fileSize = Number(file.size / 1024 / 1024);
            if (fileSize) {
                const isLt = file.size / 1024 / 1024 > 20;
                if (isLt) {
                    this.$modal.msgError(`${file.name}上传文件大小不能超过20MB!`);
                    return false;
                }
            }
            if (this.fileType) {
                let fileExtension = "";
                if (file.name.lastIndexOf(".") > -1) {
                    fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
                }
                if (file.name.lastIndexOf(",") > -1) {
                    this.$modal.msgError(`文件名不能包括','号`);
                    return
                }
                const isTypeOk = this.fileType.some((type) => {
                    if (file.type.indexOf(type) > -1) return true;
                    if (fileExtension && fileExtension.indexOf(type) > -1) return true;
                    return false;
                });
                if (!isTypeOk) {
                    this.$modal.msgError(`文件格式不正确, 请上传${this.fileType.join("/")}格式文件!`);
                    return false;
                }
            }
            this.$modal.loading("正在上传文件，请稍候...");
            return true;
        },
 handleUploadError(err) {
            this.$modal.msgError("上传文件失败，请重试");
            this.$modal.closeLoading()
        },
    // 上传成功回调
        handleUploadSuccess(response, file, fileList, index) {
            console.log(response, file, fileList, index);
            if (response.code == 200) {
                this.$modal.msgSuccess(`${file.raw.name}文件导入成功`);
                console.log(this.peoFile);
                // this.deptId = this.peoFile.deptId
                // this.getList()
                let data = {
                    portraitId: this.peoFile.id
                }
                queryAllDetailById(data).then(res => {
                    if (res && res.code == 200) {
                        this.otherFileList = res.data.piccAuditFiles
                        res.data.piccAuditFiles.forEach(item => {
                            item.createtime = item.createtime.slice(0, 10)
                        });
                        this.tableData = res.data.piccAuditFiles
                        this.title = `${res.data.portrait.name}的审计相关文件`
                        this.isFirst = false
                        this.isPortraitFile = false
                        this.before = res.data.before
                    }
                })
                this.$modal.closeLoading();
            } else {
                this.$modal.msgError(response.msg);
                this.$modal.closeLoading();
            }
        },