vue-upload-slot

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

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>