Vue项目中使用WebUploader实现文件上传的方法

注意：这里的 css 文件很少，只是那个上传文件按钮的样式，其他的样式需要自己书写，也可以直接追加在当前 vue 组件的样式里面

引入webuploader

使用Web Uploader文件上传需要引入三种资源：JS, CSS, SWF。

方法1：直接引入文件

这里我们使用完全压缩版的

webuploader.min.js 

,同时还要引入

 Uploader.swf 

、

webuploader.css 

，所以可以删除其他版本的文件，只留这三个文件，将解压的 webuploader 文件夹直接放在 static 文件夹下.

在 index.html 中引入 webuploader.min.js

<script src="./static/webuploader-0.1.5/webuploader.min.js"></script>

 

重启项目后报错了，说缺少依赖 jquery ,打开源码 webuploader.js 看一下

 

原来 webuploader 是依赖于 juqery 或者 Zepto 的，那我们引入 jquery ,我们去 jquery 官网下载 jquery ,并在 index.html 中引入，注意，一定要在

webuploader.min.js 

之前引入，在这里我下载的是 1.12.4 版本

<script src="./static/webuploader-0.1.5/jQuery1.12.4.js"></script>

写一个Demo

HTML部分

App.vue

<template>
 <div id="app">
  <div id="uploader" class="wu-example">
  <!--用来存放文件信息-->
  <div id="fileLilst" class="uploader-list"></div>
   <div class="btns">
   <!-- 选择文件的按钮 -->
    <div id="picker">选择文件</div>
   <!-- 开始上传按钮 -->
    <button id="uploadBtn" class="btn btn-default">开始上传</button>
   </div>
  </div>
 </div>
</template>

JS部分，初始化 webuploader

在 Vue 的 mounted 周期内实例化 webuploader 并进行配置

App.vue

mounted:function(){
  var uploader = WebUploader.create({
  // swf文件路径
  swf:'../static/webuploader-0.1.5/Uploader.swf',
  // 文件接收服务端。
  server: 'http://webuploader.duapp.com/server/fileupload.php',
  // 选择文件的按钮。可选。
  // 内部根据当前运行是创建，可能是input元素，也可能是flash.
  pick: '#picker',
  // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
  resize: false
 });
 }

文件加入队列前