element-文件上传-自定义上传方式

element-文件上传-自定义上传方式

这次主要写的是el-upload这个组件中的http-request钩子,首先来看一下官方的:
在这里插入图片描述
非常的简洁,简洁到完全看不懂了,简直了。

先展示一下我的成果,记得先把jquery,vue,element引入
这里实现了上传成功的回调和进度条的显示。失败的回调可以参考成功回调的方式写,差不多我就没写了。

var el_my_uploader = Vue.extend({
   
    props: ["maxSize", "maxCount", "fileList", "UploadUrl", "accept", "drag", "multiple"],
    template: '<div >' +
        '<el-upload :action="UploadUrl" :limit="maxCount" :on-exceed="handleExceed" ' +
        ' :before-upload="beforeUpload" :file-list="uploadFiles" :accept="accept" ' +
        ' :on-preview="handlePreview" ' +
        ' :before-remove="beforeRemove" :drag="drag" :multiple="multiple"' +
        ' :on-success="handleSuccess" :http-request="handleUpload">' +
        '<slot>' +
        '<el-button size="small" type="primary">点击上传</el-button>' +
        '</slot>' +
        '<slot name="tip" slot="tip"></slot>' +
        '</el-upload>' +
        '</div>',
    data: function() {
   
        var obj = {
   
            uploadFiles: [],
            uploaderId: ''
        }
        return obj;
    },
    created: function() {
   
        if (!this.fileList) {
   
            this.fileList = [];
        }
        this.uploadFiles = this.fileList;
    },
    methods: {
   
        handleExceed(files, fileList) {
   
            // 上传数量超限
            this.$message.warning(`当前限制选择 ${
     this.maxCount} 个文件`);
            return false;
        },
        handlePreview(file) {
   
            // 点击文件列表下载事件
            if (file.state && file.state != 1)
  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值