JS 与 Java 调用 Dify API 接口实战 | 极客日志

编程语言SaaSAI大前端java

JS 与 Java 调用 Dify API 接口实战

如何在 JavaScript（Vue.js）和 Java 环境中调用 Dify API。流程包括配置 API 密钥，上传文件获取 ID，以及执行工作流并解析返回结果。提供了具体的 axios 请求示例和 Spring Boot Starter 依赖及配置方法，涵盖文件识别和数据提取的完整实现方案。

星辰大海发布于 2026/3/27更新于 2026/4/163 浏览

Dify API 接口调用教程：从文件上传到工作流执行

本文档基于实际项目代码，详细介绍如何在 Vue.js 应用中调用 Dify API 进行文件识别和数据提取的完整流程。

1. 需求介绍

需求是需要上传图片文件到 Dify 接口，Dify 接口会返回 OCR 结果，前端再做展示。

2. Dify 接口介绍

稍微介绍一下 Dify 发布的接口，是通过 API 密钥去识别每个服务的，所以调用每个发布的 API 接口其实都是相同的（参考 API 文档），只是 API 密钥的区别。

需要用到的接口有上传文件（/files/upload）、执行工作流（/workflows/run），调用时带上 API 服务器前缀（https://api.dify.ai/v1）即可。

关于 Dify 接口响应，参照官方文档。

上传文件响应

返回的 id 就是工作流中需要设置的文件 id 参数。

{
  "id": "72fa9618-8f89-4a37-9b33-7e1178a24a67",
  "name": "example.png",
  "size": 1024,
  "extension": "png",
  "mime_type": "image/png",
  "created_by": 123,
  "created_at": 1577836800
}

工作流响应

工作流的输出结果就在 outputs 中。

{
  "workflow_run_id": "djflajgkldjgd",
  "task_id": "9da23599-e713-473b-982c-4328d4f5c78a"

极客日志微信公众号二维码

更多推荐文章

相关免费在线工具

RSA密钥对生成器
生成新的随机RSA私钥和公钥pem证书。在线工具，RSA密钥对生成器在线工具，online
Keycode 信息
查找任何按下的键的javascript键代码、代码、位置和修饰符。在线工具，Keycode 信息在线工具，online
Escape 与 Native 编解码
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。在线工具，Escape 与 Native 编解码在线工具，online
Mermaid 预览与可视化编辑
基于 Mermaid.js 实时预览流程图、时序图等图表，支持源码编辑与即时渲染。在线工具，Mermaid 预览与可视化编辑在线工具，online
JavaScript / HTML 格式化
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。在线工具，JavaScript / HTML 格式化在线工具，online
JavaScript 压缩与混淆
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。在线工具，JavaScript 压缩与混淆在线工具，online

const difyUrl = 'https://api.dify.ai/v1';
const difyKey = 'app-sl3XOkjWz8Zg6vqLRXEXOTyQ';

// 文件上传方法
export async function uploadFile(file) {
  const uploadUrl = difyUrl + '/files/upload';
  const headers = {
    'Authorization': 'Bearer ' + difyKey // 替换为实际 Token
  };
  try {
    console.log('上传文件中...');
    // 使用 FormData 进行文件上传
    const formData = new FormData();
    formData.append('file', file); // 将文件对象传入 FormData
    formData.append('user', 'user');
    const response = await axios({
      method: 'POST',
      url: uploadUrl,
      headers: headers,
      data: formData
    });
    if (response.status === 200) {
      console.log('文件上传成功');
      return response.data.id; // 返回上传文件的 ID
    } else {
      console.error(`文件上传失败，状态码：${response.status}`);
      return null;
    }
  } catch (error) {
    console.error('发生错误:', error);
    return null;
  }
}

{
  "inputs": {
    "input": {
      "transfer_method": "local_file",
      "upload_file_id": "{upload_file_id}",
      "type": "{document_type}"
    }
  }
}

// 运行工作流方法
export async function runWorkflow(file, responseMode = 'blocking') {
  // 上传文件
  const fileId = await uploadFile(file);
  if (!fileId) {
    console.error('文件上传失败，无法执行工作流');
    return;
  }
  // 如果上传成功，继续执行工作流
  const workflowUrl = difyUrl + '/workflows/run';
  const headers = {
    'Authorization': 'Bearer ' + difyKey,
    'Content-Type': 'application/json'
  };
  const data = {
    'inputs': {
      'input': {
        'transfer_method': 'local_file',
        'upload_file_id': fileId,
        'type': 'image'
      }
    },
    'response_mode': responseMode,
    'user': 'user'
  };
  try {
    console.log('运行工作流...');
    const res = await axios({
      method: 'POST',
      url: workflowUrl,
      headers: headers,
      data: data
    });
    if (res.status === 200) {
      console.log('工作流执行成功', res.data);
      return res.data;
    } else {
      console.error(`工作流执行失败，状态码：${res.status}`);
    }
  } catch (error) {
    console.error('发生错误:', error);
    return { 'status': 'error', 'message': error.message };
  }
}

<dependency>
  <groupId>io.github.guoshiqiufeng.dify</groupId>
  <artifactId>dify-spring-boot2-starter</artifactId>
  <version>1.5.0</version>
</dependency>

dify:
  url: http://192.168.1.10 # 请替换为实际的 Dify 服务地址
  server:
    email: [email protected] # 请替换为实际的 Dify 服务邮箱，若不需要调用 server 相关接口可不填
    password: admin123456 # 请替换为实际的 Dify 服务密码，若不需要调用 server 相关接口可不填
  dataset:
    api-key: dataset-aaabbbcccdddeeefffggghhh # 请替换为实际的知识库 api-key，若不需要调用知识库可不填

// 工作流 client
@Resource
private DifyWorkflow difyWorkflow;

// 聊天 client，需要用到里面的文件上传功能，一些公共的接口也在这里
@Resource
private DifyChatClient difyChatClient;

// 调用 dify 上传文件接口
FileUploadRequest fileUploadRequest = new FileUploadRequest();
fileUploadRequest.setApiKey(difyApiKey);
fileUploadRequest.setUserId("user");
fileUploadRequest.setFile(new MockMultipartFile());
FileUploadResponse fileUploadResponse = difyChatClient.fileUpload(fileUploadRequest);

WorkflowRunRequest workflowRunRequest = new WorkflowRunRequest();
workflowRunRequest.setApiKey(difyApiKey);
workflowRunRequest.setUserId("user");

// 构建 inputs 参数
Map<String, Object> innerInput = new HashMap<>();
innerInput.put("transfer_method", "local_file");
innerInput.put("upload_file_id", fileUploadResponse.getId());
innerInput.put("type", "image");
Map<String, Object> input = new HashMap<>();
input.put("input", innerInput);
workflowRunRequest.setInputs(input);

WorkflowRunResponse workflowRunResponse = difyWorkflow.runWorkflow(workflowRunRequest);