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

但毕竟这是面向过程基于节点的插件，如果前端使用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:

上传

{{ result }}

正在上传中

您的浏览器不支持 video元素。

在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')

搞定收工