Wondering what’s next for npm?Check out our public roadmap! »

    vue-upload-slot

    1.0.0 • Public • Published

    vue-upload-slot

    一个轻量的方便扩展的Vue上传组件, 他没有界面, 所以你可以使用slot自定义界面

    vue-upload-slot vue-upload-slot JS gzip size CSS gzip size

    2

    Install

    Using npm:

    npm install vue-upload-slot --save
    import uploadSlot from 'vue-upload-slot';
     
    Vue.use(uploadSlot);

    Using a script tag:

    <script type="text/javascript" src="https://unpkg.com/vue-upload-slot/dist/vue-upload-slot.min.js"></script>

    attribute

    名称 类型 说明
    action string 上传的地址
    headers object 设置上传的请求头部
    data object 传时附带的额外参数
    name string 上传的文件字段名
    accept string 接受上传的文件类型
    min-size number 最小上传文件大小,单位 kb
    max-size number 最大上传文件大小,单位 kb
    on-exceeded-size function(uploadSlotFile) 文件超出指定大小限制时的钩子
    on-change function(uploadSlotFiles) 选择完文件的钩子
    before-upload function(uploadSlotFile) 上传文件之前的钩子,若返回 false 或者 Promise 则停止上传
    on-progress function(event, uploadSlotFile) 文件上传进度被改变的钩子
    on-success function(response, uploadSlotFile) 文件上传成功时的钩子
    on-error function(error, uploadSlotFile) 文件上传失败时的钩子

    slot

    使用 v-slot 可以获取到组件内部的数据

    名称 类型 说明
    file uploadSlotFile 文件, 原来的File放到了uploadSlotFile.row
    selectFile Function 打开文件选择器

    uploadSlotFile 属性

    名称 类型 说明
    row File 原始文件对象
    name string 文件名
    size number 文件大小
    type string 文件类型
    progress number 文件上传进度

    Example

    <template>
      <div id="app">
        <!-- 简单 -->
        <upload-slot action="/upload" style="display: flex;">
          <template v-slot="scope">
            <button @click="scope.selectFile()">upload</button>
            <input type="text" :value="scope.file.name" style="flex: 1;" />
          </template>
        </upload-slot>
        <!-- 详细 -->
        <upload-slot
          action="/upload"
          :before-upload="beforeUpload"
          :on-progress="onProgress"
          :on-success="onSuccess"
          :on-error="onError"
          :on-change="onChange"
          :data="{ token: 'abcd' }"
          :min-size="0"
          :max-size="9999999999"
          :on-exceeded-size="onExceededSize"
          accept="image/png, image/jpeg"
        >
          <template v-slot="{ file, selectFile }">
            <div style="display: flex; margin-top:10px;">
              <span v-if="file.progress">{{ file.progress.toFixed(2) + '%' }}</span>
              <input type="text" v-model="url" style="flex: 1;" />
              <button @click="selectFile">upload</button>
            </div>
            <!-- 预览 -->
            <img :src="file.url" class="upload-img" @click="selectFile" />
          </template>
        </upload-slot>
      </div>
    </template>
     
    <script>
    export default {
      name: 'App',
      data() {
        return {
          url: ''
        };
      },
      methods: {
        onChange(files) {
          console.log('%c onChange', 'color: red;', { files });
        },
        onExceededSize(file) {
          console.log('%c onExceededSize', 'color: red;', { file });
        },
        beforeUpload(file) {
          console.log('%c beforeUpload', 'color: red;', { file });
          return true;
        },
        onProgress(progressEvent, file) {
          console.log('%c onProgress', 'color: red;', { progressEvent, file });
        },
        onSuccess(response, file) {
          console.log('%c onSuccess', 'color: red;', { response, file });
          // 这里的 url 取决于你接口返回的格式
          this.url = response.url;
        },
        onError(error, file) {
          console.log('%c onError', 'color: red;', { error, file });
        }
      }
    };
    </script> 
     
    <style src="./style.css"></style>
     

    你可以跟其他框架组合使用,比如:

    <upload-slot action="/upload" :on-success="(response, file) => (url = response.url)">
      <template v-slot="{ selectFile }">
        <div style="display: flex;">
          <el-input v-model="url" style="flex:1;"></el-input>
          <el-button type="primary" @click="selectFile">upload</el-button>
        </div>
      </template>
    </upload-slot>
    <el-input v-model="url">
      <upload-slot action="/upload" slot="append" :on-success="(response, file) => (url = response.url)">
        <template v-slot="{ selectFile }">
          <el-button @click="selectFile">upload</el-button>
        </template>
      </upload-slot>
    </el-input>

    Install

    npm i vue-upload-slot

    DownloadsWeekly Downloads

    1

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    24 kB

    Total Files

    10

    Last publish

    Collaborators

    • avatar