juploader_vue v1.0.4

juploader_vue

安装

npm install juploader_vue --save

升级/更新

npm update juploader_vue --save

引入

import JUploader from "juploader_vue";

最新更新

1、简化了图片压缩参数，简化后只保留longside（较长边）和quality（压缩率）两个参数；

2、支持【数据绑定传参】及【方法调用时传参】两种模式；

3、新增文件【拖入上传】和【截图粘贴上传】；

基本示例

<template>
  <div id="app">
    <div class="drop-div">
      <!-- JUploader组件 -->
      <JUploader ref="JUploader" :options="options" @success="success" @finish="finish"></JUploader>

      <button @click="sigleUpload">单文件上传</button>

      <button @click="multipleUpload">多文件上传</button>

      <button @click="methodUpload">调用方法上传</button>

      <button @click="cancel">全部取消</button>
      
      <p>将文件插入此区域上传</p>
    </div>
  </div>
</template>

<script>
import JUploader from "juploader_vue";

export default {
  name: "app",
  components: {
    JUploader	//注册JUploader组件
  },
  data() {
    return {
      //定义参数
      options: {
        url: 'http://xxx.com/upload',
        parms: { name: 'test_file' },
        multiple: false,
        maxSize: 1024 * 1024 * 1024 * 1024,
        drag: true,  //是否启用拖入上传
        paste: false,  //是否启用粘贴截图上传
        longside: 1200,
        quality: 0.8,
        accept: 'png,jpg,jpeg',
        unAccept: null,
      }
    }
  },
  methods: {
      
    //直接上传
    sigleUpload() {
      this.$refs.JUploader.upload();
    },
      
  	//动态修改参数后再上传
    multipleUpload() {
      this.options.multiple = true
      this.options.longside = 1600;
      this.$refs.JUploader.upload();
    },
      
    //调用方法上传（此模式不需要在data中提前定义参数）
    methodUpload() {
      this.$refs.JUploader.upload({
        url: 'http://xxx.com/upload',
        parms: { newName: 'test_file' },
        multiple: true,
        maxSize: 1024 * 1024 * 1024 * 1024,
        longside: 1200,
        quality: 0.8,
        accept: 'png,jpg,jpeg',
        unAccept: null,
      });
    },
      
    success(e) {
      console.log('单个文件上传成功', e);
    },
    finish() {
      console.log('全部上传完毕');
    },
    cancel() {
      this.$refs.JUploader.cancel();
      console.log('您取消了上传');

    }
  }
};
</script>

参数详解

options:{
    url: 'http://xxx.com/upload',	//上传目标服务器url
    parms: { newName: 'test_file' },	//上传携带的数据
    multiple: true,	//是否允许多选
    maxSize: 1024 * 1024 * 1024 * 1024,	//大小限制
    drag: true,  //支持拖入上传的el选择器，如：'#dray'或 '.drag'
    paste: false,  //支持粘贴图片上传
    longside: 1200,    //图片大小压缩，指定长边的长度
    quality: 0.8,    //图片压缩率
    accept: 'png,jpg,jpeg', //允许上传的文件类型(扩展名),多个之间用逗号隔开
    unAccept: null, //禁止上传的文件类型(扩展名)
}

事件

success :单文件上传成功

finish:全部上传完毕（无论成功或失败）

方法

//基本上传方法（需要在组件上先绑定参数）
this.$refs.JUploader.upload()

//自定义参数上传（不需要在组件上绑定参数）
this.$refs.JUploader.upload(options)

//自定义参数及自选文件上传（需要自行处理文件选择）
this.$refs.JUploader.upload(options,files)