2019-05-16 ElementUI - Upload组件的

作者: Ztry | 来源:发表于2019-05-16 10:08 被阅读0次

表单与附件上传
2019-05-16 ElementUI - Upload组件的
nodeJs与elementUI实现上传图片
elementui upload组件上传视频到七牛云
elementui里面upload组件上传base64图片
限制文件大小及显示文件大小（正则表达式）
vue+axios上传文件
elementUI的upload组件文件列表控制
VUE上传图片跨域
记文件md5文件名上传七牛云

slot - trigger & tip

直接在<el-upload>里边写的元素都会触发文件选择上传的弹窗；
如果在<el-upload>里边写的元素加上slot="trigger"，这个元素就可以用于触发文件选择上传弹窗；
如果在<el-upload>里边写的元素加上slot="tip"，这个元素就会默认到<el-upload>的下方显示文案提醒；

attribute

action：上传的地址
headers：上传的请求头部
multiple：是否多选
data：附带参数
name：上传的文件字段名
with-credentials：cookie由后台写然后上传才会带过去给后台
show-file-list：是否显示已上传文件列表
drag：是否启用拖拽上传
accept：缩略图模式下此字段无效
1. accept相关
2. audio/*
3. video/*
4. image/*
5. MIME_type
list-type：文件列表的类型（text/picture/picture-card）
auto-upload：选取文件自动上传，autoUpload为false后只执行了handleChange
file-list：[{name: name,url:url}]
disabled：是否禁用
limit：最大允许上传个数

method：各种属性影响下各种方法调用的先后顺序

autoUpload
1. true：会生成一个fileList但this.fileList不会赋值->handleChange->beforeUpload->[httpRequest]->handleProgress->handleSuccess|handleError->handleChange
2. false：会生成一个fileList但this.fileList不会赋值->handleChange
beforeRemove->handleRemove
handleExceed：文件超出时提示
handleProgress注意要通过event.percent来加载进度条
handleSuccess修改fileList
beforeUpload：直接用上传文件的大小和类型就没有问题，如果需要图片尺寸大小的校验就需要用promise来判断，之前根据网上的demo写过一段代码，复制以下
beforeRemove：删除之前可以进行一些提示然后同样是promise来判断
handleRemove：移除文件之后的操作
handleChange：文件状态改变时的钩子，file.status="ready|uploading|success|fail"
clearFiles：清空已上传的文件列表（该方法不支持在 before-upload 中调用）
abort(file: fileList 中的 file 对象)：取消上传请求
submit：手动上传文件列表

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>ElementUI Upload</title>
        <link rel="stylesheet" href="/lib/elementui@2.8.2/index.css" />
        <style>
            [v-cloak] {
                display: none;
            }
        </style>
    </head>
    <body>
        <div id="app" v-cloak>
            <h1>ElementUI Upload1</h1>
            <el-upload
                class="upload-demo"
                :action="action"
                :headers="headers"
                :multiple="multiple"
                testdata="data"
                :name="name"
                :with-credentials="withCredentials"
                :show-file-list="showFileList"
                :drag="drag"
                :accept="accept"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :on-success="handleSuccess"
                :on-error="handleError"
                :on-progress="handleProgress"
                :on-change="handleChange"
                :before-upload="beforeUpload"
                :before-remove="beforeRemove"
                :list-type="listType"
                :auto-upload="autoUpload"
                :file-list="fileList"
                testhttp-request="httpRequest"
                :disabled="disabled"
                :limit="limit"
                :on-exceed="handleExceed"
                ref="upload1"
            >
                <el-button
                    slot="trigger"
                    size="small"
                    type="primary"
                    @click.stop="btnClick('upload1')"
                    >点击上传</el-button
                >
                <el-collapse-transition>
                    <el-progress
                        :percentage="uploadProgress"
                        v-show="progressShow"
                    ></el-progress>
                </el-collapse-transition>
                <div slot="tip" class="el-upload__tip">
                    只能上传jpg/png文件，且不超过500kb
                </div>
            </el-upload>
        </div>
        <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
        <script src="/lib/elementui@2.8.2/index.js"></script>
        <script>
            var vm = new Vue({
                el: "#app",
                data: function() {
                    return {
                        action: "/api/upload/",
                        multiple: true,
                        data: {
                            dataTest: 1
                        },
                        name: "test",
                        withCredentials: true,
                        showFileList: true,
                        drag: false,
                        accept: "image/*",
                        listType: "text", //text/picture/picture-card
                        autoUpload: true,
                        fileList: [],
                        disabled: false,
                        limit: 3,
                        uploadProgress: 0,
                        progressShow: false
                    };
                },
                computed: {
                    headers: function() {
                        return {};
                    }
                },
                methods: {
                    // 点击文件列表中已上传的文件时的钩子
                    handlePreview(file) {
                        console.log("TCL: handlePreview -> file", file);
                        if (file.response && file.response.url) {
                            window.open(file.response.url);
                        }
                    },
                    // 文件列表移除文件时的钩子
                    handleRemove(file, fileList) {
                        console.log(
                            "TCL: handleRemove -> file, fileList",
                            file,
                            fileList
                        );
                        this.fileList = fileList;
                        this.changeUploadBtnDisabled();
                    },
                    // 文件上传成功时的钩子
                    handleSuccess(response, file, fileList) {
                        console.log(
                            "TCL: handleSuccess -> response, file, fileList",
                            response,
                            file,
                            fileList
                        );
                        this.progressShow = false;
                        this.fileList = fileList;
                        this.changeUploadBtnDisabled();
                    },
                    // 文件上传失败时的钩子
                    handleError(err, file, fileList) {
                        console.log(
                            "TCL: handleError -> err, file, fileList",
                            err,
                            file,
                            fileList
                        );
                        this.progressShow = false;
                    },
                    // 文件上传时的钩子
                    handleProgress(event, file, fileList) {
                        debugger
                        console.log(
                            "TCL: handleProgress -> event, file, fileList",
                            event,
                            file,
                            fileList
                        );
                        this.progressShow = true;
                        // this.uploadProgress = parseInt(file.percentage);    //这个获取是不正确的，存在上传进度问题
                        this.uploadProgress = parseInt(event.percent);
                    },
                    // 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
                    handleChange(file, fileList) {
                        console.log(
                            "TCL: handleChange -> file, fileList",
                            file,
                            fileList
                        );
                    },
                    // 上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。
                    beforeUpload(file) {
                        console.log("TCL: beforeUpload -> file", file);
                        this.uploadProgress = 0;
                        // let regImage = /(\/jpg|\/jpeg|\/gif|\/png|\/bmp)$/;
                        // let _this = this;
                        // if (!regImage.test(file.type)) {
                        //     this.$AlertTip("请上传正确的图片格式文件");
                        //     return false;
                        // }
                        // const isLt2M = file.size / 1024 / 1024 < 2;
                        // if (!isLt2M) {
                        //     this.$AlertTip("上传的图片最大不能超过2M");
                        //     return false;
                        // }
                        // const isSize = new Promise(function(resolve, reject) {
                        //     let width = 200;
                        //     let height = 200;
                        //     let _URL = window.URL || window.webkitURL;
                        //     let img = new Image();
                        //     img.onload = function() {
                        //         let valid =
                        //             img.width == width && img.height == height;
                        //         valid ? resolve() : reject();
                        //     };
                        //     img.src = _URL.createObjectURL(file);
                        // }).then(
                        //     () => {
                        //         return file;
                        //     },
                        //     () => {
                        //         _this.$AlertTip("上传的icon必须是200*200!");
                        //         return Promise.reject();
                        //     }
                        // );
                        // return isSize;
                    },
                    // 删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止删除。
                    beforeRemove(file, fileList) {
                        console.log(
                            "TCL: beforeRemove -> file, fileList",
                            file,
                            fileList
                        );
                    },
                    // 覆盖默认的上传行为，可以自定义上传的实现
                    httpRequest() {
                        console.log("TCL: httpRequest -> httpRequest");
                    },
                    // 文件超出个数限制时的钩子
                    handleExceed(files, fileList) {
                        console.log(
                            "TCL: handleExceed -> files, fileList",
                            files,
                            fileList
                        );
                    },
                    btnClick(refsName) {
                        console.log("btnClick", event);
                        if (this.fileList.length < this.limit) {
                            var input = this.$refs[refsName].$refs[
                                "upload-inner"
                            ].$refs["input"];
                            input.value = null;
                            input.click();
                        }
                    },
                    changeUploadBtnDisabled() {
                        var button = this.$refs["upload1"].$refs["upload-inner"]
                            .$children[0].$el;
                        if (this.fileList.length >= this.limit) {
                            // 加上is-disabled类
                            button.classList.add("is-disabled");
                        } else {
                            // 去掉is-disabled类
                            button.classList.remove("is-disabled");
                        }
                    }
                }
            });
        </script>
    </body>
</html>

总结

之前在开发工作中发现el-upload的disabled设置为true之后就不能删除列表；如果设置为false，同时把el-button设置为disabled为true时，又不能阻止el-upload的重新上传，所以查看源码发现是这段代码控制的调起文件上传窗口的同时知道应该阻止el-button的冒泡（发现el-button的disabled为true时无法触发click，也无法阻止冒泡），给el-button添加is-disabled这个类显示出disabled的假象，所以才多了btnClick和changeUploadBtnDisabled这两个函数

    // upload.vue: https://unpkg.com/element-ui@2.8.2/packages/upload/src/upload.vue

    handleClick() {
      if (!this.disabled) {
        this.$refs.input.value = null;
        this.$refs.input.click();
      }
    },

觉得如果不用更改源码能达到需求要求，我是不想轻易改动源码的，可以通过源码来学习然后根据需求加一层修改，现在还是小白，还有很长的路要走，加油！

表单与附件上传
工具：vue+elementUI(upload组件)要求：熟悉elementUI的uplaod组件及其特性 Get...
2019-05-16 ElementUI - Upload组件的
slot - trigger & tip 直接在里边写的元素都会触发文件选择上传的弹窗；如...
nodeJs与elementUI实现上传图片
前端使用的是elementUI里面的upload封装好的组件 1.引入multer 和 fs（没有则需要npm下载...
elementui upload组件上传视频到七牛云
elementui upload组件上传视频到七牛云首先，需要获取Token，需要后端小伙伴配合后端文档：h...
elementui里面upload组件上传base64图片
1. 最近在做用vue.js构建的后台管理页面，有用到elementui里面的upload组件进行图片的上传，这个...
限制文件大小及显示文件大小（正则表达式）
接上篇elementui upload组件上传视频到七牛云上次咱们自己对文件大小进行限制，写的比较粗糙，咱们这次...
vue+axios上传文件
页面是用elementUi搭建的，之所以没有用upload组件是因为没有支持裁剪图片功能本文采用vue-cropp...
elementUI的upload组件文件列表控制
不能直接修改fileList中的内容，而应该用回调函数中的fileList去赋值data中的fileList，否则...
VUE上传图片跨域
上传组件用的elementui - upload,由于上传图片需要用户的登陆信息,所以前端请求头添加了一个toke...
记文件md5文件名上传七牛云
之前写过一篇记录用elementui upload组件上传文件。这次为了节省七牛云空间，使用对文件md5后上传的方...