1. Toy模板网首页
  2. > Toy博客

Element-UI的Upload 上传文件

7月前 作者：sleepwalker_1992 分类：Toy博客 阅读(29) 违法举报

这篇具有很好参考价值的文章主要介绍了Element-UI的Upload 上传文件。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1、Element-UI版本

"element-ui": "^2.15.9"

Upload 上传官方文档

2、一次只能上传一个文件

2.1 自动上传

限制一次只能上传一个文件，并判断上传的文件大小及文件类型；

自动上传：即选择文件后即开始校验，校验通过后调接口上传到服务器

<template>
    <div class="upload-content">
        <el-upload
            ref="uploadFile"
            drag
            action="sys/file/upload"
            :multiple="false"
            :limit="1"
            accept=".txt, .zip, .rar"
            :before-upload="beforeUpload"
            :on-success="uploadSuccess"
            :on-error="uploadError"
            :on-exceed="uploadExceed">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">只能上传txt/zip/rar文件，且不超过10M，一次只能上传一个</div>
        </el-upload>
    </div>
</template>
<script>
export default {
    name: 'upload-file',
    data() {
        return {};
    },
    methods: {
        // 文件上传前对文件类型、文件大小判断限制
        beforeUpload(file) {
            const { name, size } = file;
            const index = name.lastIndexOf('.');
            // 判断文件名是否有后缀，没后缀文件错误
            if(index === -1) {
                this.$notify.error({
                    title: '错误',
                    message: '文件错误，请重新上传！',
                });
                return false;
            }
            const fileType = name.substr(index + 1);
            const acceptFileTypes = ['txt', 'zip', 'rar'];
            // 判断文件类型
            if(!acceptFileTypes.includes(fileType)) {
                this.$notify.error({
                    title: '错误',
                    message: '文件类型错误，请重新上传！',
                });
                return false;
            }
            // 判断文件大小
            if(size > 10*1024*1024) {
                this.$notify.error({
                    title: '错误',
                    message: '文件大小超过10M，请重新上传！',
                });
                return false;
            }
            // 默认true
            return true;
        },

        // 上传接口调取成功status为200
        uploadSuccess(res) {
            if(res.code === 200) {  // 文件上传成功
                this.$notify.success({
                    title:'成功',
                    message: '文件上传成功！',
                });
            } else {
                this.uploadError();
            }
        },

        // 文件上传失败
        uploadError() {
            this.$notify.error({
                title: '错误',
                message: '文件上传失败！',
            });
        },

        // 文件个数超过限制
        uploadExceed() {
            this.$notify.warning({
                title:'提示',
                message: '您已添加了一个文件，如需替换，请先删除已添加的文件！',
            });
        },
    }
}
</script>
<style scoped>
.upload-content {
    margin: 40px auto;
    width: 400px;
    text-align: center;
}
</style>

Element-UI的Upload 上传文件

Element-UI的Upload 上传文件

2.2 手动上传

限制一次只能上传一个文件，并判断上传的文件大小及文件类型；

手动上传：设置auto-upload为false。选择文件后等待触发上传的动作，比如点击按钮触发上传文件，会先走before-upload校验文件，校验通过后调接口上传到服务器。

<template>
    <div class="upload-content">
        <el-upload
            ref="uploadFile"
            drag
            action="sys/file/upload"
            :multiple="false"
            :limit="1"
            accept=".txt, .zip, .rar"
            :auto-upload="false"
            :before-upload="beforeUpload"
            :on-success="uploadSuccess"
            :on-error="uploadError"
            :on-exceed="uploadExceed">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">只能上传txt/zip/rar文件，且不超过10M，一次只能上传一个</div>
        </el-upload>
        <div class="btn-footer">
            <el-button size="small" type="primary" @click="submit">确 定</el-button>
        </div>
    </div>
</template>
<script>
export default {
    name: 'upload-file',
    data() {
        return {};
    },
    methods: {
        // 点击按钮手动上传，会先触发beforeUpload，再执行上传
        submit() {
            this.$refs.uploadFile.submit();
        },

        // 文件上传前对文件类型、文件大小判断限制
        beforeUpload(file) {
            const { name, size } = file;
            const index = name.lastIndexOf('.');
            // 判断文件名是否有后缀，没后缀文件错误
            if(index === -1) {
                this.$notify.error({
                    title: '错误',
                    message: '文件错误，请重新上传！',
                });
                return false;
            }
            const fileType = name.substr(index + 1);
            const acceptFileTypes = ['txt', 'zip', 'rar'];
            // 判断文件类型
            if(!acceptFileTypes.includes(fileType)) {
                this.$notify.error({
                    title: '错误',
                    message: '文件类型错误，请重新上传！',
                });
                return false;
            }
            // 判断文件大小
            if(size > 10*1024*1024) {
                this.$notify.error({
                    title: '错误',
                    message: '文件大小超过10M，请重新上传！',
                });
                return false;
            }
            // 默认true
            return true;
        },

        // 上传接口调取成功status为200
        uploadSuccess(res) {
            if(res.code === 200) {  // 文件上传成功
                this.$notify.success({
                    title:'成功',
                    message: '文件上传成功！',
                });
            } else {
                this.uploadError();
            }
        },

        // 文件上传失败
        uploadError() {
            this.$notify.error({
                title: '错误',
                message: '文件上传失败！',
            });
        },

        // 文件个数超过限制
        uploadExceed() {
            this.$notify.warning({
                title:'提示',
                message: '您已添加了一个文件，如需替换，请先删除已添加的文件！',
            });
        },
    }
}
</script>
<style scoped>
.upload-content {
    margin: 40px auto;
    width: 400px;
    text-align: center;
}
.btn-footer {
    margin-top: 10px;
}
</style>

Element-UI的Upload 上传文件

 3、一次可上传多个文件

3.1 自动上传

<template>
    <div class="upload-content">
        <el-upload
            ref="uploadFile"
            drag
            action="sys/file/upload"
            multiple
            :limit="5"
            accept=".txt, .zip, .rar"
            :before-upload="beforeUpload"
            :on-success="uploadSuccess"
            :on-error="uploadError"
            :on-exceed="uploadExceed">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">只能上传txt/zip/rar文件，且不超过10M</div>
        </el-upload>
    </div>
</template>
<script>
export default {
    name: 'upload-file',
    data() {
        return {};
    },
    methods: {
        // 文件上传前对文件类型、文件大小判断限制
        beforeUpload(file) {
            const { name, size } = file;
            const index = name.lastIndexOf('.');
            // 判断文件名是否有后缀，没后缀文件错误
            if(index === -1) {
                this.$notify.error({
                    title: '错误',
                    message: `${name}文件错误，请重新上传！`,
                });
                return false;
            }
            const fileType = name.substr(index + 1);
            const acceptFileTypes = ['txt', 'zip', 'rar'];
            // 判断文件类型
            if(!acceptFileTypes.includes(fileType)) {
                this.$notify.error({
                    title: '错误',
                    message: `${name}文件类型错误，请重新上传！`,
                });
                return false;
            }
            // 判断文件大小
            if(size > 10*1024*1024) {
                this.$notify.error({
                    title: '错误',
                    message: `${name}文件大小超过10M，请重新上传！`,
                });
                return false;
            }
            // 默认true
            return true;
        },

        // 上传接口调取成功status为200
        uploadSuccess(res, file) {
            if(res.code === 200) {  // 文件上传成功
                this.$notify.success({
                    title:'成功',
                    message: `${file.name}文件上传成功！`,
                });
            } else {
                this.uploadError();
            }
        },

        // 文件上传失败
        uploadError() {
            this.$notify.error({
                title: '错误',
                message: '文件上传失败！',
            });
        },

        // 文件个数超过限制
        uploadExceed(files, fileList) {
            this.$notify.warning({
                title:'提示',
                message: `当前限制一次可选择 5 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`,
            });
        },
    }
}
</script>
<style scoped>
.upload-content {
    margin: 40px auto;
    width: 400px;
    text-align: center;
}
</style>

Element-UI的Upload 上传文件

Element-UI的Upload 上传文件

3.2 手动上传

<template>
    <div class="upload-content">
        <el-upload
            ref="uploadFile"
            drag
            action="sys/file/upload"
            multiple
            :limit="5"
            accept=".txt, .zip, .rar"
            :auto-upload="false"
            :before-upload="beforeUpload"
            :on-success="uploadSuccess"
            :on-error="uploadError"
            :on-exceed="uploadExceed">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">只能上传txt/zip/rar文件，且不超过10M</div>
        </el-upload>
        <div class="btn-footer">
            <el-button size="small" type="primary" @click="submit">确 定</el-button>
        </div>
    </div>
</template>
<script>
export default {
    name: 'upload-file',
    data() {
        return {};
    },
    methods: {
        // 点击按钮手动上传，会先触发beforeUpload，再执行上传
        submit() {
            this.$refs.uploadFile.submit();
        },

        // 文件上传前对文件类型、文件大小判断限制
        beforeUpload(file) {
            const { name, size } = file;
            const index = name.lastIndexOf('.');
            // 判断文件名是否有后缀，没后缀文件错误
            if(index === -1) {
                this.$notify.error({
                    title: '错误',
                    message: `${name}文件错误，请重新上传！`,
                });
                return false;
            }
            const fileType = name.substr(index + 1);
            const acceptFileTypes = ['txt', 'zip', 'rar'];
            // 判断文件类型
            if(!acceptFileTypes.includes(fileType)) {
                this.$notify.error({
                    title: '错误',
                    message: `${name}文件类型错误，请重新上传！`,
                });
                return false;
            }
            // 判断文件大小
            if(size > 10*1024*1024) {
                this.$notify.error({
                    title: '错误',
                    message: `${name}文件大小超过10M，请重新上传！`,
                });
                return false;
            }
            // 默认true
            return true;
        },

        // 上传接口调取成功status为200
        uploadSuccess(res, file) {
            if(res.code === 200) {  // 文件上传成功
                this.$notify.success({
                    title:'成功',
                    message: `${file.name}文件上传成功！`,
                });
            } else {
                this.uploadError();
            }
        },

        // 文件上传失败
        uploadError() {
            this.$notify.error({
                title: '错误',
                message: '文件上传失败！',
            });
        },

        // 文件个数超过限制
        uploadExceed(files, fileList) {
            this.$notify.warning({
                title:'提示',
                message: `当前限制一次可选择 5 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`,
            });
        },
    }
}
</script>
<style scoped>
.upload-content {
    margin: 40px auto;
    width: 400px;
    text-align: center;
}
.btn-footer {
    margin-top: 10px;
}
</style>

Element-UI的Upload 上传文件

Element-UI的Upload 上传文件

 4、隐藏提示 “按 delete 键可删除”

Element-UI的Upload 上传文件

设置样式即可文章来源地址https://www.toymoban.com/news/detail-503844.html

.upload-content /deep/ .el-upload-list__item  .el-icon-close-tip {
  display: none !important;
}

到了这里，关于Element-UI的Upload 上传文件的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包