可以使用 fs.* 处理器, 制作文件上传接口。在管理界面中, 使用 Upload 组件实现文件、图片或视频上传功能。

约定

1. 示例中约定应用根目录为 /data/app, 实际编写时需替换为应用根目录。
2. 示例中约定服务器地址为 http://127.0.0.1:5099, 实际编写时需自行替换。
3. 使用 <> 标识自行替换的内容。 例如: icon-<图标名称>, 实际编写时应替换为: icon-foo, icon-bar ...

给 product Model 添加一个 images JSON 字段用来保存产品图片文件地址。

更新数据表结构

yao migrate -n product

给 product Table 添加图集字段,在fields["table"]加入以下代码, 实现图片上传管理。

使用 Cloud Props 生成一个文件上传接口。

{
  "图集": {
    "bind": "images",
    "view": { "type": "Image", "compute": "Downalod" }, // 使用 Image 组件显示已上传图片
    "edit": {
      "type": "Upload",
      "compute": "Upload",
      "props": {
        "filetype": "image", // 上传文件类型设定为 image
        "$api": {
          "process": "fs.system.Upload" // 声明一个API接口, 并绑定 fs.system.Upload 处理器
        }
      }
    }
  }
}

把layout改成以下代码:

  "layout": {
    "header": { "preset": {} },
    "table": {
      "columns": [
        { "name": "联动", "width": 200 },
        { "name": "名称", "width": 200 },
        { "name": "备注", "width": 200 },
        { "name": "上架状态", "width": 200 },
        { "name": "图集", "width": 200 }
      ]
    }
  }

使用 Downalod 和 Upload Compute 处理器转换图片预览 URL

使用 API Widget 创建一个文件上传接口, 将处理器指定为 fs.system.Upload。

/data/app/apis/upload.http.yao

{
  "name": "文件上传",
  "version": "1.0.0",
  "description": "文件上传",
  "guard": "bearer-jwt",
  "paths": [
    {
      "path": "/file",
      "method": "POST",
      "guard": "-",
      "process": "fs.system.Upload",
      "in": ["$file.file"],
      "out": { "status": 200, "type": "application/json" }
    }
  ]
}

运行调试

添加一个测试文件用于上传

mkdir -p /data/app/data/ # 如 data 目录不存在, 创建一个 data 目录
echo "Upload Test" > /data/app/data/upload-test.txt

新建一个 Flow DSL 文件编排上传逻辑,/flows/upload/file.flow.yao

{
  "label": "文件上传",
  "version": "1.0.0",
  "description": "文件上传",
  "nodes": [
    {
      "name": "文件",
      "process": "fs.system.ReadFile",
      "args": ["{{$in[0].tempFile}}"]
    },
    {
      "name": "当前时刻",
      "process": "utils.now.Timestampms",
      "args": []
    },
    {
      "name": "名称",
      "process": "utils.str.Concat",
      "args": ["{{$res.当前时刻}}", ".txt"]
    },
    {
      "name": "文件名",
      "process": "utils.str.JoinPath",
      "args": ["/", "texts", "{{$res.名称}}"]
    },
    {
      "name": "保存文件",
      "process": "fs.system.WriteFile",
      "args": ["{{$res.文件名}}", "{{$res.文件}}", "0644"]
    }
  ],
  "output": "{{$res.文件名}}"
}

运行调试

创建个临时文件用于上传

tempfile=$(mktemp)
echo "Upload Test" > $tempfile
echo $tempfile

yao run flows.upload.file '::{"tempFile":"<tempfile>"}'

新建一个 Script 脚本编排上传逻辑/scripts/upload.js

/**
 * 上传文件
 * @param {*} temp
 * @returns
 */
function File(temp) {
  temp = temp || {};
  if (!temp.tempFile) {
    throw new Exception("参数错误", 400);
  }

  var fs = new FS("system");
  let tempFile = temp.tempFile || null;
  console.log([tempFile, temp]);
  var data = fs.ReadFile(tempFile);
  let now = new Date().getTime();
  let file = `/texts/${temp.name}`;
  fs.WriteFile(file, data, 0644);
  return file;
}

运行调试

创建个临时文件用于上传

tempfile=$(mktemp)
echo "Upload Test" > $tempfile
echo $tempfile

yao run scripts.upload.File '::{"tempFile":"<tempfile>"}'

/data/app/apis/upload.http.yao

{
  "name": "文件上传",
  "version": "1.0.0",
  "description": "文件上传",
  "guard": "bearer-jwt",
  "group": "upload",
  "paths": [
    {
      "path": "/file",
      "method": "POST",
      "guard": "-",
      "process": "fs.system.Upload",
      "in": ["$file.file"],
      "out": { "status": 200, "type": "application/json" }
    },
    {
      "path": "/flow",
      "method": "POST",
      "guard": "-",
      "process": "flows.upload.file",
      "in": ["$file.file"],
      "out": { "status": 200, "type": "application/json" }
    },
    {
      "path": "/script",
      "method": "POST",
      "guard": "-",
      "process": "scripts.upload.File",
      "in": ["$file.file"],
      "out": { "status": 200, "type": "application/json" }
    }
  ]
}

运行调试

添加一个测试文件用于上传

mkdir -p /data/app/data/ # 如 data 目录不存在, 创建一个 data 目录
echo "Upload Test" > /data/app/data/upload-test.txt

curl http://127.0.0.1:5099/api/upload/file \
  -F file=@data/upload-test.txt

curl http://127.0.0.1:5099/api/upload/flow \
  -F file=@data/upload-test.txt

curl http://127.0.0.1:5099/api/upload/script \
  -F file=@data/upload-test.txt

{
  "图集": {
    "bind": "images",
    "view": { "type": "Image", "compute": "Download" },
    "edit": {
      "type": "Upload",
      "compute": "Upload",
      "props": {
        "filetype": "image",
        "$api": {
          "process": "flows.upload.file" // 绑定 flows.upload.file 处理器
        }
      }
    }
  }
}

{
  "图集": {
    "bind": "images",
    "view": { "type": "Image", "compute": "Download" },
    "edit": {
      "type": "Upload",
      "compute": "Upload",
      "props": {
        "filetype": "image",
        "$api": {
          "process": "scripts.upload.File" // 绑定 scripts.upload.File 处理器
        }
      }
    }
  }
}

{
  "图集": {
    "bind": "images",
    "view": { "type": "Image", "compute": "Download" },
    "edit": {
      "type": "Upload",
      "compute": "Upload",
      "props": { "filetype": "image", "api": "/apis/upload/flow" }
    }
  }
}

{
  "图集": {
    "bind": "images",
    "view": { "type": "Image", "compute": "Download" },
    "edit": {
      "type": "Upload",
      "compute": "Download",
      "props": { "filetype": "image", "api": "/apis/upload/script" }
    }
  }
}