vue双向绑定机制和vue-resource在前端异步上传文件

最新推荐文章于 2021-02-05 00:06:22 发布

苏建康

最新推荐文章于 2021-02-05 00:06:22 发布

阅读量511

点赞数

分类专栏： Django vue

本文链接：https://blog.csdn.net/SJK__/article/details/90418734

版权

本文介绍了如何在Vue.js项目中使用vue-resource进行异步视频文件上传。首先通过cnpm安装vue-resource，然后在特定组件中引入并使用。在Vue组件内编写相应的方法和变量，实现文件上传功能。后端代码部分也进行了简要说明，以完成完整的异步上传流程。

摘要由CSDN通过智能技术生成

之前jquery异步上传文件时用的uploadify，但毕竟这是面向过程基于节点的插件，如果前端使用vue.js的脚手架，就要入乡随俗，利用vue.js自带的vue-resource来实现异步上传视频文件
首先安装 vue-resource 没必要全局安装，所以只在需要用到的项目中安装即可

cnpm install vue-resource --save
如果安装报错就把后面 --save去掉

如果你的vue是脚手架项目就在main.js中引入并且声明使用
我是在index.js引入的，感觉都一样

//引入resource
import VueResource from 'vue-resource'
//声明使用
Vue.use(VueResource)

然后在vue组件里写代码实现

<template>
    <div id="uploads">

            <input type="file" @change="getFile($event)" /><button @click="upload">上传</button>
            <div>{
  { result }}</div>
            <div v-show="uping==1">正在上传中</div>
            <div v-show='result'>
   
               <video ref='video' controls>