Upload文件上传组件

2024-06-28 23:52:33首发，6天前更新

ax-upload组件可实现批量上传，以多种形式上传，支持云直传，包括阿里云、七牛云、又拍云等。

Upload系列文档

Upload文件上传组件 6天前更新 AX-UPLOAD文件上传组件(webcomponent)详细 需8金币 1周前更新 ax.Upload文件上传模块(class类)详细 需11金币 1周前更新 Upload文件上传 1个月前更新

简单使用

使用ax-upload节点即可表示一个文件上传域，必须配置url属性，该属性为文件发送的服务器地址。

输出
HTML
PHP

```
                
                
            
```

                
                //测试环境模拟跨域
                header("Access-Control-Allow-Origin: *");
                //定义上传目录(模拟)
                $path = "filesDirectory/";
                $path = "https://unpkg.com/@codady/resource/image/"; 
                //定义上传文件类型
                $extArr = array("jpg", "png", "gif", "txt", "doc", "docx", "pdf", "xsl", "xslx","mp3","mp4");
                //定义上传文件大小限制（1MB）
                $maxSize = 1024 ** 3;
                //获取文件类型后缀
                function extend($file_name)
                {
                    $extend = pathinfo($file_name);
                    $extend = strtolower($extend["extension"]);
                    return $extend;
                }
                //获得13位时间戳，与文件的lastModified位数保持一致
                function getTimestamp() {
                    list($t1, $t2) = explode(' ', microtime());
                    return (float)sprintf('%.0f',(floatval($t1)+floatval($t2))*1000);
                }
                $timestamp = getTimestamp();
                //输出结果
                function echoResult($flag,$msg='上传出错了！',$time,$url='',$name='')
                {
                    $object = $flag?array('msg' => $msg, 'code' => 200, 'url' => $url, 'name' => $name,'time'=>$time):array('msg' => $msg, 'code' => 400,'time'=>$time);
                    $result = json_encode($object);
                    echo  $result;
                }
                if (isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST") {
                    $file = $_FILES[array_shift(array_keys($_FILES))];
                    $name = $file['name'];
                    $size = $file['size'];
                    $tmp = $file['tmp_name'];
                    //随机文件名
                    $ext = extend($name);
                    $image_name = time() . rand(100, 999) . "." . $ext;
                    //有必要在服务器端再做一次校验，避免绕开前端校验恶意上传攻击
                    if (empty($name)) {
                        echoResult(false,'请选择文件！',$timestamp);
                        exit;
                    }
                    if (!in_array($ext, $extArr)) {
                        echoResult(false,'文件格式不对！',$timestamp);
                        exit;
                    }
                    if ($size > $maxSize) {
                        echoResult(false,'文件大小不能超过1MB',$timestamp);
                        exit;
                    }
                    if(!file_exists($path)){
                        //如果路径错误（模拟）
                        echoResult(true,'模拟路径上传成功!',$timestamp,'https://unpkg.com/@codady/resource/image/upload.jpg',$image_name);
                        exit;
                    }else{
                        //通过以上校验则上传文件返回文件路径{valid:true,message:'上传成功！',code:200,url:'files/xxx.jpg'}
                        if (move_uploaded_file($tmp, $path . $image_name)) {
                            //在实际情况中需要手动拼接路径
                            $url = 'ajax/'.$path . $image_name;
                            echoResult(true,'上传成功!',$timestamp,$url,$image_name);
                            exit;
                        }  
                    }
                }

Attributes属性

组件的属性与内置实例的参数是一致的，有三点需要注意：

组件属性全部小写。
属性值都是字符串格式。
属性名如果是动宾结构，或者是由两个词组成的，那么中间使用短横分开，例如：模块参数contType（如果有），在组件属性写做cont-type；参数b4Init在属性中写做b4-init。

欲了解模块的参数详细，请点击这里。

Methods方法

除了组件通用的set、reset方法外，主要使用组件内置实例自身的方法，用法举例：elem.ins.update({})。

Events事件

由于本组件内置模块实例，所以组件的事件有两类：

组件通用的set、reset、connected事件，用法举例：elem.on('connected',()=>{})。
来自内置实例自身的事件，elem.ins指向内置实例，用法举例：elem.ins.on('initiated',()=>{})。