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

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

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

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

cnpm install vue-resource --save

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

//引入resource
import VueResource from 'vue-resource'

//声明使用
Vue.use(VueResource)

在页面中写上传控件 

上传demo:

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

         </div>

在vuejs中写绑定方法和变量

data () {
      return {
        upath: '',
      result: '',
      uping:0
      }
    },
methods:{
      upload: function () {
        var zipFormData = new FormData();
        zipFormData.append('file', this.upath);//filename是键，file是值，就是要传的文件
        let config = { headers: { 'Content-Type': 'multipart/form-data' } };
        this.uping = 1;
        this.$http.post('http://localhost:8000/md_admin/uploadmp4', zipFormData,config).then(function (response) {
          console.log(response);
          console.log(response.data);
          this.uping = 0;
          this.result = response.data;
          //绑定播放地址
          this.$refs.video.src = response.data.url;
        });
      },
      getFile: function (even) {
        this.upath = event.target.files[0];
      }
}

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

#定义上传视频方法
def uploadmp4(request):
    if request.method == 'POST':
        item = {}
        file = request.FILES.get('file')
        f = open(os.path.join(UPLOAD_ROOT,'',file.name),'wb')

        item['message'] = '上传成功'
        item['url'] = 'http://localhost:8000/upload/'+ file.name
        item['error'] = 0
        #写文件 遍历文件流
        for chunk in file.chunks():
            f.write(chunk)
        return HttpResponse(json.dumps(item,ensure_ascii=False),content_type='application/json')

搞定收工