抖音上传视频（纯前端实现霸屏软件的功能）进店转发视频功能，详情搜索抖音霸屏软件

抖音霸屏介绍

先来介绍一下吧，嫌啰嗦的可以直接跳转>>>思路分析 ↓

1.抖音同城霸屏：可控制所有扫码用户发布视频的时间—实现片区域本地霸屏；

2.蓝V号增粉：顾客扫码一键领取优惠券并自动发布视频、同时自动跳转到商家蓝V号关注并了解商家更多商品优惠内容；




这是我从网上找的一些资料，好了好了，不贴图片了，我是来分享技术的，而不是来营销的。
感兴趣的可以体验一下，最后再上两个二维码吧

抖音扫描二维码，体验一下

---

抖音开发文档

https://open.douyin.com/platform/doc/6848834666171009035
难点（看明白文档也就那么回事）：

1. 先获取用户的acccess_token >>>>>>>>
2. 上传视频到服务器 >>>>>>>>>>
3. 创建视频 >>>>>>>>>>>>

---

思路分析

由于时间紧迫，工期时间太短，以下思路是我们全栈总监给我分析的，并且全程指导，并且解决问题，在此非常感谢我们的全栈总监。

抖音的开发文档太坑了，没有任何前端的api，没有前端的示例，根本看不懂说的是啥，也有可能是前端实现起来太麻烦，抖音直接否决了。

1. 首先用户用扫二维码，会进入一个抖音自带的获取用户code的页面，code在url里
2. 此二维码需要定义一个url，在用户扫描完二维码之后，需要获取用户的acccess_token,
3. 然后进入一个url，此url为一个展示页面,
4. 当用户点击领取优惠（或者查看详情）之后，上传视频，然后创建视频等等（后续还有，具体看需求）

---

步骤

一、首先是拼接url

https://open.douyin.com/platform/oauth/connect/?client_key=1111111111111111&response_type=code&scope=user_info,video.create&redirect_uri=http://douyinshare.xswl.com/

1. client_key需要去申请，怎么申请自行百度吧
2. redirect_uri=后边重定向的url就是需要打开的链接（也是我们需要自己构造的页面）

二、redirect_uri=后面的url的布局构建

三、将我们拼接好的URL生成一个二维码，用户扫描完之后授权，会重定向，进入我们的网页，同时抖音会在url地址栏返回一个code码给我们，获取的code用来调用https://open.douyin.com/oauth/access_token/ 换取用户acccess_token。

created () {
// 在页面加载的时候获取地址栏的地址，因为地址栏有我们需要的code码
  
    var url = window.location.href
// 截取URL上的code并赋值
    var code = url.substring(35, 71)
// this指向
    var that = this
// axios 的get请求
    axios.get('/api/oauth/access_token/', {
// 需要传的参数
        params: {
          client_key: '申请的自己的 client_key',
          client_secret: '申请的自己的  client_secret',
          grant_type: 'authorization_code',
          code: code
        }
      })
      .then(function (res) {
        console.log(res.data.data， '1111111111')
//  获取到用户的两项，并赋值
        that.baba = res.data.data.access_token
        that.id = res.data.data.open_id
      })
      .catch(function (error) {
        console.log(error, '======>2')
      })
  },

四、 用户点击领取的时候，我们需要提示用户，当用户确认的时候我们需要上传视频并且创建视频，然后定向到我们需要展示的商家的抖音号里

// 在创建视频之前需要先定义一个发布视频的方法：
// 请求POST抖音，创建视频
    fabu () {
      axios.post(
          // 拼接抖音需求文档的url
           "/api/video/create/" + "?open_id=" + this.id + "&access_token=" + this.baba,
          {
            // 传参
            // open_id: this.id,
            // access_token: this.baba,
            // Content_Type: 'video/mp4',
            // video: Ajson
            // video: bytarr
            video_id: this.video_id,
            text: '棉柔王国满足你对棉的一切想象，订购热线053266697666',
            poi_id: '111',
            poi_name: '111科技有限公司'
          },
          {
            // 请求头
            headers: {
              'Content-Type': 'application/json'
            }
          }
        )
        .then(function (response) {
          console.log('3======>' + JSON.stringify(response), response)
        })
        .catch(function (error) {
          console.log(error + '4')
        })
    }

// 因为某些限制，axios的post请求不能发multipart/form-data，所以我们换一种请求方式
// 思路是先get请求本地的转换好的二进制文件，然后作为参数来传post


    // get请求本地的二进制文件(此二进制文件为视频转换成的)， 用xhr来发送post请求，得到抖音返回的视频id
    authorization () {
      // videoPostData.txt为后端大佬自创的软件，用来给我转换格式的
      // 格式为xhr.setRequestHeader里面的'multipart/form-data;charset=utf-8; boundary=123456789'
      axios.get('../../videoPostData.txt', {
        responseType: 'blob'
      }).then(res => {
        console.log(res.data, 66666666666666666666666)

        var that = this

        // (1).开始XMLHttpRequest请求
        var xhr = new XMLHttpRequest()
        var url = 'https://open.douyin.com/video/upload/' + '?open_id=' + this.id + '&access_token=' + this.baba
        // (2).设置请求方法和地址
        xhr.open('post', url)
        // (3).设置请求头（post请求才需要设置 以下为抖音发送的格式）
        xhr.setRequestHeader(
          'Content-Type',
          'multipart/form-data;charset=utf-8; boundary=123456789'
        )

        xhr.send(res.data)
        // (5).注册回调函数
        xhr.onload = function () {
          console.log(xhr.responseText, 7)
          console.log(url, 8)
          console.log(JSON.parse(xhr.response), 10)
          console.log(JSON.parse(xhr.responseText), 11)
          console.log(JSON.parse(xhr.responseText).data.video.video_id, 9)
          console.log(that.video_id)
          console.log(that)
          // 将抖音返回的video_id获取到，赋值到data
          that.video_id = JSON.parse(xhr.responseText).data.video.video_id
          // 调用方法，发布视频
          that.fabu()
        }
        })
    },

可以参照我的代码，和抖音的官方文档来

完结撒花

★,°:.☆(￣▽￣)/$:.°★。撒花！