axios上传视频或音频时后端接口405

最近在做一个后台管理项目，视频上传到腾讯云点播，音频上传到对象存储。这就需要区分是视频或音频了。

当上传音频时调用后端给的接口，上传到对象存储。

这里遇到的问题主要是自己对axios不太熟练，导致后台接口返回405，

HTTP Status 405 – Method Not Allowed

---

Type Status Report

Message Request method 'GET' not supported

Description The method received in the request-line is known by the origin server but not supported by the target resource.

---

Apache Tomcat/8.0.0

如下图所示：

前端代码如下：

        开始上传
        

vuejs代码如下：

vExampleAdd: function () {
      this.$refs.vExampleFile.click()
    },
    /**
     * vExample示例。上传视频过程。
     **/
    vExampleUpload: function () {
      let self = this
      // 获取上传实例
      let videoFile = this.$refs.vExampleFile.files[0]
      let index = ''
      for (let key in UE.instants) {
        index = key
      }
      if (videoFile.type.indexOf("audio") !== -1) {

        axios.post(`${CFG.API_URL}xsnArticle/uploadUeditorVideo`).then(req => {
          console.log("req:", req.data)
          
        }).catch(err => {
          console.error('Error: ', err)
        })


      } else {
        //这里是视频上传到腾讯云点播的代码， 这里没问题，这篇文章的重点不在这里
        let uploader = this.tcVod.upload({
          videoFile: videoFile
        })

        self.uploaderInfo = {
          videoInfo: uploader.videoInfo,
          isVideoUploadSuccess: false,
          progress: 0,
          cancel: function () {
            uploader.cancel()
          }
        }

        uploader.on('video_progress', function (info) {
          self.uploaderPercent = parseInt(info.percent * 100 + '%')
        })
        uploader.on('video_upload', function (info) {
          self.uploaderInfo.isVideoUploadSuccess = true
        })
        uploader.done().then(function (doneResult) {
          UE.instants[index].execCommand(
            'insertHtml',
            ''
          )
        }).then(function (videoUrl) {
          self.$refs.vExample.reset()

          self.dialogVisible = false
        })
      }

    },

主要是不太了解axios的工作原理，导致调用后端接口时直接就是:

axios.post(`${CFG.API_URL}xsnArticle/uploadUeditorVideo`).then(req => {
          console.log("req:", req.data)
          
        }).catch(err => {
          console.error('Error: ', err)
        })

并没有给后端传参数，也并没有把需上传的文件传给后端接口。所以才导致后端接口返回405。

后来经过google，找到一篇文章完美的解决了我的困惑，修改代码如下：（视频上传的代码这里省略）

let videoFile = this.$refs.vExampleFile.files[0]
      let index = ''
      for (let key in UE.instants) {
        index = key
      }
      if (videoFile.type.indexOf("audio") !== -1) {

        //在这里声明所需上传的文件参数，并把videoFile赋值给audioData
        const audioData = new FormData();
        audioData.append('upfile', videoFile);

        axios.post(`${CFG.API_URL}xsnArticle/uploadUeditorVideo`, audioData).then(req => {
          console.log("req:", req.data)
          
          
        }).then(function () {
          self.$refs.vExample.reset()

          self.dialogVisible = false
        }).catch(err => {
          console.error('Error: ', err)
        })


      }

打印出数据了接口为200.后台也可以获取到上传的音频，并把链接发送给了前端，到此问题得以解决。

总结：当使用axios上传文件时，需把上传的文件当成参数传给后端，表单需这样设置

const audioData = new FormData();

audioData.append('upfile', videoFile);

也有的人说需要设置

'Content-Type': 'multipart/form-data' 

其实并没有必要。

 

有用的链接：

https://github.com/axios/axios/issues/318

https://www.jianshu.com/p/85247afabdea

https://blog.csdn.net/u012049760/article/details/71159800