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

如下图所示：

前端代码如下：

<form ref="vExample" method="post" enctype="multipart/form-data">
        <button
          ref="video_btn"
          type="button"
          :class="(uploaderPercent>0  && uploaderPercent<100) ? 'video_btn_gray' : 'video_btn'"
          @click="vExampleAdd"
          :disabled="(uploaderPercent>0  && uploaderPercent<100)"
        >开始上传</button>
        <input
          type="file"
          name="upfile"
          style="display:none;"
          accept="audio/mpeg, audio/mp3, video/mp4"
          ref="vExampleFile"
          @change="vExampleUpload"
        >
</form>

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',
            '<img width="300" height="200" id="video_' +
            doneResult.fileId +
            '" _url="' +
            doneResult.video.url +
            '" alt="' +
            doneResult.fileId +
            '" class="edui-upload-video  vjs-default-skin" src="/static/UEditor/themes/default/images/spacer.gif" style ="background:url(/static/UEditor/themes/default/images/videologo.gif) no-repeat center center; border:1px solid gray;" x5-video-player-type="h5" playsinline webkit-playsinline />'
          )
        }).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.youkuaiyun.com/u012049760/article/details/71159800