封装elementui el-upload文件上传组件

封装elementui el-upload文件上传组件

// 自定义的全局组件my-component
let _utils = new Utils()
Vue.component(
    'uploadfile', {
        props: {
            uploaddata: {
                type: Object
            }
        },
        template: `<div style="margin:20px 0;">
<el-upload
  accept=".xls,.xlsx"
  class="upload-demo"
  :action="uploaddata.url"
  :before-upload="beforeUpload"
  :on-success="handleSuccess"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :before-remove="beforeRemove"
  :limit="2"
  :on-exceed="handleExceed">
  <span>表名称:{{uploaddata.sheetname}}</span>
  <el-button size="small" type="primary">选择文件</el-button>
<!--  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>-->
</el-upload>
</div>`,
        data() {
            return {}
        },
        methods: {
            /*
            上传文件之前的钩子，参数为上传的文件，
            若返回 false 或者返回 Promise 且被 reject，则停止上传。
             */
            beforeUpload(file){
                const fileSuffix = file.name.substring(file.name.lastIndexOf(".")+1);
                const whiteList = ["xls", "xlsx"];
                if (whiteList.indexOf(fileSuffix) === -1) {
                    _utils.MessageError(this,"上传文件只能是xls、xlsx格式")
                    return false;
                }
                const isLt2M = file.size / 1024 / 1024 < 5;
                if (!isLt2M) {
                    _utils.MessageError(this,"上传文件大小不能超过5MB")
                    return false;
                }
            },
            handleRemove(file, fileList) {
             
            },
            handleSuccess(response, file, fileList) {
                let {code, msg} = response
                if (code == 0) {
                    utils.MessageSuccess(this, "文件上传成功")
                } else {
                    utils.MessageError(this, msg)
                }
            },
            /*
            点击文件列表中已上传的文件时的钩子
             */
            handlePreview(file) {
                // console.log(file);
            },
            /*
             文件超出个数限制时的钩子
             */
            handleExceed(files, fileList) {

            },
            /*
            删除文件之前的钩子，参数为上传的文件和文件列表，
            若返回 false 或者返回 Promise 且被 reject，则停止删除
             */
            beforeRemove(file, fileList) {
                // return this.$confirm(`确定移除 ${file.name}？`);
            }
        }
    }
)

最后

以上就是外向冰棍为你收集整理的封装elementui el-upload文件上传组件的全部内容，希望文章能够帮你解决封装elementui el-upload文件上传组件所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。