视频或者图片上传（vue版本）可直接使用

最新推荐文章于 2025-05-19 10:57:36 发布

原创最新推荐文章于 2025-05-19 10:57:36 发布 · 3.3k 阅读

20 ·

CC 4.0 BY-SA版权

文章标签：

#vue #上传视频 #上传图片

vue 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了一个简单的视频上传组件实现过程，使用HTML5的文件输入和FormData API，配合axios进行POST请求，将视频文件发送到后端接口。代码简洁实用，经实际测试验证可行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<div>
   <span>视频上传</span>
   <a href="javascript:;">
     <button>上传</button>
     <input type="file" name="file" @change="uploadUp($event)" 
       enctype="multipart/form-data">
    </a>
</div>



uploadUp(event) {
      var files = event.target.files,file;
       let formData = new FormData();
       formData.append('file', files[0]);
       axios({
          url:"后端的接口地址",
          data:formData,
          method:"post"
       }).then(resp=>{
         console.log(resp);
       })
    },

为了简洁，我把所有的样式都删掉了，功能亲测可用。