在Vue框架下完成文件上传功能

需求描述

近日在工作项目中遇到了一个需求：完成无刷新页面的文件上传功能，上传时要提交文件以外的字段信息，整个项目的框架是Vuejs，无jQuery，也不得使用jQuery的插件。

寻找轮子

由于该需求没有图片文件预览的要求，运行平台也不是移动端，所以相对来说，轮子还是不少的。最终我选择了vue-file-upload。

轮子install

npm

npm install --save vue-file-upload

CommonJS

var VueFileUpload = require('vue-file-upload');

ES6写法

由于我的项目是用ES6写的，所以重点看这一块。

<template>
  <vue-file-upload url="http://localhost:8000/vue-file-upload/demo/upload.php" v-bind:files.sync="files" v-bind:events="cbEvents" v-bind:filters="filters" v-bind:request-options="reqopts"></vue-file-upload>
<button type="button" @click="doPost">上传</button>
<table>
  <thead>
    <tr>
      <th>name</th>
      <th>size</th>
      <th>progress</th>
      <th>status</th>
      <th>action</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="file in files">
      <td v-text="file.name"></td>
      <td v-text="file.size"></td>
      <td v-text="file.progress"></td>
      <td v-text="onStatus(file)"></td>
      <td>
        <button type="button" value="upload" @click="uploadItem(file)">upload</button>
      </td>
    </tr>
  </tbody>
</table>
<button type="button" @click="uploadAll">上传所有文件</button>
</template>

<script>
import VueFileUpload from '../src/vue-file-upload.vue';
import UploadActions from '../src/config/msg.js';
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;
          }
        }
      ],
      //事件回调
      cbEvents:{
        onCompleteUpload:(file,response,status,header)=>{
          console.log(file);
          console.log("finish upload;")
        },
        onAddFileSuccess:(file)=>{
          console.log(file);
          console.log("success add to queue");
        }
      },
      reqopts:{
        formData:{
          tokens:'tttttttttttttt'
        },
        responseType:'json',
        withCredentials:false
      }
    }
  },
  methods:{
    doPost(){
      this.$broadcast(UploadActions.DOPOST);
    },
    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(UploadActions.DOPOST);
    }
  },
  components:{
    VueFileUpload
  }
}
</script>

首先引入vue-file-upload：

import VueFileUpload from '../src/vue-file-upload.vue';

然后在data部分里进行文件绑定和其他属性的绑定。

• filters的部分可以对文件的类型进行过滤
• cbEvents里进行文件上传后的事件回调
• reqopts里写入上传文件时除文件以外的XHR传递参数