我正在try 用GitLab API上传文件,一切正常.我在终端中使用curl命令,如下所示:

curl --header "PRIVATE-TOKEN: my-private-token" \
     --upload-file "path to"/file \
     "https://my-gitlab-url.it/api/v4/projects/<projectID>/packages/generic/<name_packaged>/<version>/<file>"

现在,由于cURL VIA命令行对于"普通用户"来说有点粗略,我正在开发一个用于上传文件的图形用户界面.

我已经用Boostrap创建了一个文件输入表单,代码如下

        <div class="mb-3">
          <label for="formFile" class="form-label">Chose the file</label>
          <input class="form-control" type="file" id="formFile" />
        </div>

和读取数据的Java脚本

var select_file = document.getElementById("formFile");
function onChangeSelectFile() {
  var value = select_file.files;
  var text = select_file.files[0].name;
  console.log(value, text);
}
select_file.onchange = onChangeSelectFile;

现在,我想用fetch

fetch("https://my-gitlab-url.it/api/v4/projects/<projectID>/packages/generic/<name_packaged>/<version>/<file>", {
  headers: {
    "PRIVATE-TOKEN": "my-private-token",
  },
})

显然,我错过了发送实际文件的部分,并且我找不到一种方法来做到这一点.

根据documentation是一个PUT的要求

推荐答案

您将需要使用FormData对象来构造和发送请求.

var select_file = document.getElementById("formFile");

function onChangeSelectFile() {
  var file = select_file.files[0];
  var url = "https://my-gitlab-url.it/api/v4/projects/<projectID>/packages/generic/<name_packaged>/<version>/<file>";
  var privateToken = "my-private-token";

  var formData = new FormData();
  formData.append("file", file);

  fetch(url, {
    method: "PUT",
    headers: {
      "PRIVATE-TOKEN": privateToken,
    },
    body: formData,
  })
    .then((response) => response.json())
    .then((data) => {
      console.log("File uploaded successfully:", data);
    })
    .catch((error) => {
      console.error("Error uploading file:", error);
    });
}

select_file.onchange = onChangeSelectFile;

Javascript相关问答推荐

如何判断属于多个元素的属性是否具有多个值之一

我可以使用CSS有效地实现最大宽度=100%和最大高度=100%,而无需父母有明确的/固定的宽度和高度,替代方法吗?

Google Apps脚本中的discord邀请API响应的日期解析问题

防止用户在selectizeInput中取消 Select 选项

在Angular中将样式应用于innerHTML

查找最长的子序列-无法重置数组

如何解决useState错误—setSelect Image不是函数''

编剧如何获得一个div内的所有链接,然后判断每个链接是否都会得到200?

将核心模块导入另一个组件模块时存在多个主题

JS:XML insertBefore插入元素

使用NextJS+MongoDB+Prisma ORM获取无效请求正文,无法发布错误

将范围 Select 器添加到HighChart面积图

FileReader()不能处理Firefox和GiB文件

不同表的条件API端点Reaction-redux

将Auth0用户对象存储在nextjs类型脚本的Reaction上下文中

Reaction useState和useLoaderData的组合使用引发无限循环错误

本地损坏的Java脚本

如何在尚未创建的鼠标悬停事件上访问和着色div?

如何在Java脚本中并行运行for或任意循环的每次迭代

无法使用Redux异步函数读取未定义的useEffect钩子的属性';map';