Element上传文件详解

一、Element上传文件格式

Element上传文件是基于Vue.js的文件上传组件，是一款简单易用且功能强大的文件上传组件。它支持多个文件上传、拖拽上传、上传进度条显示等功能，而且它的样式也非常美观。

二、Element上传文件php接口怎么写

要使用Element上传文件组件，需要后端提供一个接口来处理文件上传。下面是一个PHP的上传接口示例：

/**
 * 上传文件接口
 */
public function upload(){
    $file = request()->file('file');

    if($file){
        // 是否上传成功
        if ($file->isValid()) {
            // 获取文件相关信息
            $originalName = $file->getClientOriginalName(); // 文件原名
            $ext = $file->getClientOriginalExtension();     // 扩展名
            $type = $file->getClientMimeType();     // mimeType
            $realPath = $file->getRealPath();   //临时文件的绝对路径

            $filename = date('Ymd').'/'.md5(uniqid()).'.'.$ext;

            // 使用我们新建的uploads本地存储空间（目录）
            $bool = Storage::disk('uploads')->put($filename, file_get_contents($realPath));

            if($bool){
                return ['status'=>200, 'src'=>Storage::disk('uploads')->url($filename), 'message'=>'上传成功'];
            }else{
                return ['status'=>0, 'message'=>'上传失败'];
            }

        }
    }

    return ['status'=>0, 'message'=>'上传失败'];
}

三、Element上传文件到后端

Element上传文件组件可以上传文件到后端，只需要设置上传接口的地址即可，代码如下：

  
    
   点击上传
   
    
   
只能上传jpg/png文件，且不超过500kb
   

  

四、Element上传文件回显

Element上传文件组件上传成功后，会自动将上传成功的文件回显出来，代码如下：

  
    
   点击上传
   
    
   
只能上传jpg/png文件，且不超过500kb
   
    

  

五、Element上传文件组件

Element上传文件组件是一个非常强大的文件上传组件，它支持多个文件上传、拖拽上传、上传进度条显示等功能，而且它的样式也非常美观。它还可以自定义上传文件格式、大小限制等，可以根据自己的需求进行配置。

六、Element上传文件默认参数

Element上传文件组件提供了一些默认参数，可以根据需要进行设置，例如设置上传文件的最大大小、支持上传的文件格式等。代码如下：

  
    
   点击上传
   
    
   
只能上传jpg/png文件，且不超过500kb
   
    
   
        
    
        
    
将文件拖到此处，或点击上传
    
        
    
只能上传jpg/png文件，且不超过500kb
    
    
   

  

七、Element上传文件名字校验

Element上传文件组件支持上传文件名字校验，可以设置允许上传的文件名字格式和文件名字的最大长度。代码如下：

  
    
   点击上传
   
    
   
只能上传jpg/png文件，且不超过500kb
   
    
   
        
    
        
    
将文件拖到此处，或点击上传
    
        
    
只能上传jpg/png文件，且不超过500kb
    
    
   

  

<script>
    // 文件名字校验
    beforeUpload(file) {
        const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isJPG) {
            this.$message.error('上传头像图片只能是 JPG/PNG 格式!');
        }
        if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
    },
</script>

八、Element上传文件传表单参数

Element上传文件组件还可以在上传文件的同时传递其他表单参数，代码如下：

  
    
   点击上传
   
    
   
只能上传jpg/png文件，且不超过500kb
   
    
   
        
    
        
    
将文件拖到此处，或点击上传
    
        
    
只能上传jpg/png文件，且不超过500kb
    
    
   

  

九、Element上传文件大小限制

Element上传文件组件支持上传文件大小限制，可以设置允许上传的文件大小和拒绝上传的文件大小。代码如下：

  
    
   点击上传
   
    
   
只能上传jpg/png文件，且不超过500kb
   
    
   
        
    
        
    
将文件拖到此处，或点击上传
    
        
    
只能上传jpg/png文件，且不超过500kb
    
    
   

  

<script>
    // 上传文件大小限制
    handleExceed(files, fileList) {
        this.$message.warning(`超出上传文件数量限制，最多上传 ${this.limit} 个文件`);
    },
    // 文件选取后触发的事件
    handleChange(file, fileList) {
        if (file.size > 1024 * 1024 * 5) {
            fileList.pop();
            this.$message.warning(`文件大小不能超过 5MB`);
            return false;
        }
    },
</script>

十、Element上传文件onchange选取

Element上传文件组件选择完文件后会自动触发onchange事件，代码如下：

  
    
   点击上传
   
    
   
只能上传jpg/png文件，且不超过500kb
   
    
   
        
    
        
    
将文件拖到此处，或点击上传
    
        
    
只能上传jpg/png文件，且不超过500kb
    
    
   

  

<script>
    // 文件选取后触发的事件
    handleChange(file, fileList) {
        //console.log(file.response.src);
        if (file.size > 1024 * 1024 * 5) {
            fileList.pop();
            this.$message.warning(`文件大小不能超过 5MB`);
            return false;
        }
    },
</script>