Code Monkey home page Code Monkey logo

vue-ele-upload-video's Introduction

vue-ele-upload-video | 使得视频上传更加容易

MIT Licence npm size download

介绍

vue-ele-upload-video 对 element-ui 中 upload 组件进一步封装,使得视频上传更加容易

效果图

效果图

在线示例

https://codepen.io/dream2023/pen/ZNVvBg/

安装

npm install vue-ele-upload-video --save

使用

// 全局引入
import EleUploadVideo from "vue-ele-upload-video";
Vue.component(EleUploadVideo.name, EleUploadVideo);
// 局部引入
import EleUploadVideo from "vue-ele-upload-video";
export default {
  components: {
    EleUploadVideo
  }
};

示例(上传到七牛云)

<template>
  <ele-upload-video
    :data="{
      token: token
    }"
    :fileSize="20"
    @error="handleUploadError"
    :responseFn="handleResponse"
    style="margin: 50px"
    action="https://upload.qiniup.com/"
    v-model="video"
  />
</template>

<script>
  export default {
    data() {
      return {
        // 上传时需要携带后台请求的token
        token: "xxxx",
        video: ""
      };
    },
    methods: {
      handleUploadError(error) {
        console.log("error", error);
      },
      handleResponse(response) {
        return "https://www.xxx.com/upload/video/" + response.id;
      }
    }
  };
</script>

Props 参数

props: {
  // 值
  value: {
    type: String
  },
  // 上传地址
  action: {
    type: String,
    required: true
  },
  // 响应处理函数
  responseFn: Function,
  // 文件大小限制(Mb)
  fileSize: {
    type: Number
  },
  // 显示宽度(px)
  width: {
    type: Number,
    default: 360
  },
  // 显示高度(默认auto)
  height: {
    type: Number
  },
  // 是否显示提示
  isShowTip: {
    type: Boolean,
    default: true
  },
  // 是否显示上传成功的提示
  isShowSuccessTip: {
    type: Boolean,
    default: true,
  },
  // 文件类型
  fileType: {
    type: Array
  },
    // 设置上传的请求头部(同官网)
  headers: Object,
  // 支持发送 cookie 凭证信息 (同官网)
  withCredentials: {
    type: Boolean,
    default: false
  },
  // 上传时附带的额外参数(同官网)
  data: {
    type: Object
  },
  // 上传的文件字段名 (同官网)
  name: {
    type: String,
    default: 'file'
  },
    // 覆盖默认的上传行为,可以自定义上传的实现 (同官网)
  httpRequest: Function,
  // 接受上传的文件类型(thumbnail-mode 模式下此参数无效)(同官网)
  accept: String,
  // 删除前的操作(同官网)
  beforeRemove: Function,
}

参考链接

vue-ele-upload-video's People

Contributors

dependabot[bot] avatar dream2023 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.