vue-loader 上传文件:vue-file-upload
jopen
9年前
vue-file-upload
vue.js ,vue-loader 上传文件,vue-file-upload 代码里面包含demo,运行:
npm run dev
install
npm
npm install --save vue-file-upload
CommonJS
var VueFileUpload = require('vue-file-upload');
ES6
app.vue
<template lang="jade"> vue-file-upload(url='upload.do', v-bind:files.sync = 'files', v-bind:filters = "filters", v-bind:on-complete-upload = 'completeUpload') table thead tr th name th size th progress th status th action tbody tr(v-for='file in files') td(v-text='file.name') td(v-text='file.size') td(v-text='file.progress') td(v-text='onStatus(file)') td button(type='button',@click="uploadItem(file)") 上传 button(type='button',@click="uploadAll") 上传所有文件 </template> <script> import VueFileUpload from 'vue-file-upload'; export default{ data(){ return{ files:[], //文件过滤器,只能上传图片 filters:[ { name:"imageFilter", fn(file){ var type = '|' + file.type.slice(file.type.lastIndexOf('/') + 1) + '|'; return '|jpg|png|jpeg|bmp|gif|'.indexOf(type) !== -1; } } ] } }, methods:{ onStatus(file){ if(file.isSuccess){ return "上传成功"; }else if(file.isError){ return "上传失败"; }else if(file.isUploading){ return "正在上传"; }else{ return "待上传"; } }, uploadItem(file){ //单个文件上传 file.upload(); }, uploadAll(){ //上传所有文件 this.$broadcast('DO_POST_FILE'); }, completeUpload(file,response,status,header){ console.log("finish upload;") } }, components:{ VueFileUpload } } </script>