React-Native用tus-js-client传Vimeo视频遇405错误的排查问询

Let's break down what's causing your 405 Method Not Allowed error and walk through the fixes step by step:

1. The Core Issues with Your Current Code #

Your approach has three critical problems that lead to the error:

• Corrupted binary data: Using FileSystem.readAsStringAsync() reads the video as UTF-8 text, which destroys the binary structure of the MP4 file. Converting this corrupted string to a File object means you're uploading invalid data that Vimeo can't process.
• Missing authentication: Vimeo's tus upload endpoints require a valid authorization token. Without it, the server rejects your request (often with a 405 or 401 status code).
• Potentially invalid upload endpoint: Your vimeoUploadLink must be a tus-specific URL obtained from Vimeo's API, not a generic video endpoint.

2. Corrected Implementation #

First, ensure you have react-native-fs and tus-js-client installed. Then use this revised code:

import FileSystem from 'react-native-fs';
import tus from 'tus-js-client';

const uploadVideoToVimeo = async () => {
  try {
    const fileUri = this.state.uri;
    const fileInfo = await FileSystem.getInfoAsync(fileUri);
    
    // Fetch the local video as a Blob to preserve binary data
    const fileBlob = await fetch(fileUri).then(res => res.blob());

    const upload = new tus.Upload(fileBlob, {
      endpoint: this.state.vimeoUploadLink,
      retryDelays: [0, 1000, 3000, 5000],
      // Add your Vimeo access token (ensure it has "upload" scope enabled)
      headers: {
        'Authorization': `Bearer ${YOUR_VIMEO_ACCESS_TOKEN}`
      },
      metadata: {
        filename: "video.mp4",
        filetype: "video/mp4",
        size: fileInfo.size.toString() // Match actual file size for Vimeo's validation
      },
      onError: function(error) {
        console.log("Upload failed:", error);
        // Log detailed response for debugging
        if (error.originalResponse) {
          console.log("Status code:", error.originalResponse.status);
          console.log("Response text:", error.originalResponse.responseText);
        }
      },
      onProgress: function(bytesUploaded, bytesTotal) {
        const percentage = (bytesUploaded / bytesTotal * 100).toFixed(2);
        console.log(`Progress: ${bytesUploaded}/${bytesTotal} (${percentage}%)`);
      },
      onSuccess: function() {
        console.log("Upload complete! Video URL:", upload.url);
        // Optional: Fetch full video details from Vimeo API using upload.url
      }
    });

    // Start the upload process
    upload.start();
  } catch (err) {
    console.log("File handling error:", err);
  }
};

3. Key Notes for Success #

• Get a valid tus endpoint: To obtain vimeoUploadLink, send a POST request to https://api.vimeo.com/me/videos with a body like {"upload": {"approach": "tus", "size": <YOUR_FILE_SIZE>}}. Use the upload.upload_link value from the response.
• Token permissions: Ensure your Vimeo access token has the upload scope enabled in the Vimeo Developer Portal.
• Tus fallback: If you still hit method issues, add overridePatchMethod: true to the tus options (this works around rare PATCH method restrictions, though Vimeo's endpoints support it natively).

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