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