Vue.js中使用Fetch调用BunnyStream API传递动态视频名求助

1. 绑定输入框获取动态名称 #

先在模板里用 v-model 绑定组件变量，让输入框内容实时同步到组件数据中：

<template>
  <div>
    <input 
      type="text" 
      v-model="videoName" 
      placeholder="输入视频名称"
    />
    <button @click="createVideo">创建视频</button>
  </div>
</template>

2. 编写 Fetch 请求方法 #

把绑定的动态变量放进请求体，注意要转成 JSON 字符串，同时配置好 BunnyNet 要求的请求头（API 密钥、Content-Type）：

<script>
export default {
  data() {
    return {
      videoName: '',
      bunnyApiKey: '你的BunnyNet API密钥',
      storageZoneName: '你的存储区名称'
    }
  },
  methods: {
    async createVideo() {
      // 先校验输入是否为空
      if (!this.videoName.trim()) {
        alert('请输入视频名称')
        return
      }

      try {
        const response = await fetch(`https://video.bunnycdn.com/library/${this.storageZoneName}/videos`, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'AccessKey': this.bunnyApiKey
          },
          // 将动态变量包装成对象后转成JSON字符串
          body: JSON.stringify({
            title: this.videoName
          })
        })

        if (!response.ok) {
          throw new Error(`请求失败: ${response.status}`)
        }

        const result = await response.json()
        console.log('视频创建成功:', result)
        // 成功后清空输入框
        this.videoName = ''
      } catch (error) {
        console.error('创建视频出错:', error)
        alert('创建视频失败，请检查API密钥和网络')
      }
    }
  }
}
</script>

3. 常见问题排查 #

• 确认 v-model 绑定无误：输入内容时，在控制台打印 this.videoName，看是否和输入框内容同步。
• 必须用 JSON.stringify：BunnyNet API 只接受 JSON 格式的请求体，直接传对象会导致格式错误。
• 检查请求头：确保 Content-Type 设为 application/json，且 AccessKey 是有效的 BunnyNet API 密钥。
• 验证 API 端点：确认 URL 中的存储区名称（storageZoneName）正确，BunnyNet 视频创建端点格式为 https://video.bunnycdn.com/library/[存储区名称]/videos。

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