之前介绍了一个基于jquery的uploadify插件，可以用来上传文件：Django2.0.4 + Uploadify3.0（h5版）实现多文件异步上传和删除

但毕竟这是面向过程基于节点的插件，如果前端使用vue.js的脚手架，就要入乡随俗，利用vue.js自带的VUE资源来实现异步上传视频文件

首先安装vue-resource没必要全局安装，所以只在需要用到的项目中安装即可

1
cnpm install vue - 资源- 保存

然后在入口文件main.js中引入并且声明使用

1
2
3
4
// 引入资源从'vue-resource' 导入VueResource
 

//声明使用Vue 。使用（VueResource ）

在页面中写上传控件 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
上传演示：

         <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 >  
 
               您的浏览器不支持视频元素。
                
               </视频>

         </ DIV>

在vuejs中写绑定方法和变量

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
data （）{ return { 
        upath ：'' ，
      result ：'' ，
      uping ：0 } }，
方法：{ 
      upload ：function （）{ var zipFormData = new FormData （）; 
        zipFormData 。附加（'文件' ，这。UPATH ）; // filename是键，文件是值，就是要传的文件
        let config = { headers ： 
         
      
       
             { 'Content-Type' ：'multipart / form-data' } }; 这个。uping = 1 ; 这个。$ http 。post （'http：// localhost：8000 / md_admin / uploadmp4' ，zipFormData ，config ）。然后（功能（响应）{ 
          控制台。日志（响应）; 
          控制台。日志（响应。数据）; 此。    
         
          
          uping = 0 ; 这个。结果= 响应。数据; //绑定播放地址本。$ refs 。视频。src = 响应。数据。网址; }）; }，
      getFile ：function （even ）{ this 。upath = 事件。目标。files [ 0 ]; } }

最后，写一下后端上传代码：

1
2
3
4
5
6
7
8
9
10
11
＃define义上传视频方法def uploadmp4 （request ）：if request 。method == 'POST' ：
        item = {} 
        file = request 。文件。得到（'文件' ）
        ˚F = 开放（OS ，路径，加入（UPLOAD_ROOT ，'' ，文件，名称），'WB' ）

      

        item [ 'message' ] = '上传成功' 
        item [ 'url' ] = 'http：// localhost：8000 / upload /' + file 。名称    
        item [ 'error' ] = 0 ＃write文件遍历文件流for chunk in file 。chunks （）：
            f 。write （chunk ）返回HttpResponse （json 。转储（item ，ensure_ascii = False ），content_type = 'application / json' ）

完成！