如何使用JavaScript Fetch通过GitLab REST API上传文件

核心要点 #

GitLab通用包上传API要求使用PUT请求，需携带认证信息（如个人访问令牌），同时要正确处理文件的二进制数据。

实现步骤及代码示例 #

1. 表单与文件获取
   假设你的Bootstrap表单结构如下：

   <form id="packageUploadForm">
     <div class="mb-3">
       <label for="packageFile" class="form-label">选择包文件</label>
       <input class="form-control" type="file" id="packageFile">
     </div>
     <button type="submit" class="btn btn-primary">上传</button>
   </form>
   

2. 监听提交并发起请求
   以下是完整的JavaScript实现，包含认证、请求构造和错误处理：

   const form = document.getElementById('packageUploadForm');
   const fileInput = document.getElementById('packageFile');
   
   form.addEventListener('submit', async (e) => {
     e.preventDefault();
   
     const file = fileInput.files[0];
     if (!file) {
       alert('请先选择要上传的文件');
       return;
     }
   
     // 替换为你的GitLab实例及项目参数
     const gitlabUrl = 'https://your-gitlab-instance.com';
     const projectId = 'your-project-id'; // 支持数字ID或"username/project-name"格式
     const packageName = 'your-package-name';
     const packageVersion = '1.0.0';
     const token = 'your-personal-access-token'; // 需拥有api权限
   
     // 构造编码后的上传URL
     const uploadUrl = `${gitlabUrl}/api/v4/projects/${encodeURIComponent(projectId)}/packages/generic/${packageName}/${packageVersion}/${encodeURIComponent(file.name)}`;
   
     try {
       const response = await fetch(uploadUrl, {
         method: 'PUT',
         headers: {
           'PRIVATE-TOKEN': token,
           'Content-Type': file.type || 'application/octet-stream'
         },
         body: file // 直接传入File对象作为请求体
       });
   
       if (response.ok) {
         alert('文件上传成功！');
         fileInput.value = ''; // 清空选择框
       } else {
         const errorData = await response.json();
         alert(`上传失败：${errorData.message || '未知错误'}`);
       }
     } catch (err) {
       alert(`请求出错：${err.message}`);
     }
   });
   

关键注意事项 #

• 令牌权限：确保个人访问令牌开启了api权限，否则会返回403禁止访问错误。
• URL编码：项目路径、文件名包含特殊字符时，必须用encodeURIComponent编码，避免请求路径解析错误。
• Content-Type：优先使用文件自身的MIME类型，无法识别时用application/octet-stream兜底，GitLab会正确处理二进制数据。
• 错误判断：Fetch仅在网络故障时抛出异常，HTTP错误（如400、401）需通过response.ok判断，再解析响应体获取具体错误信息。

内容的提问来源于stack exchange，提问作者NicoCaldo