hyupload-vue2

Vue 2 components for Hyper Http File Upload Server integration. Simplifies file uploads with progress tracking and UI controls.

上传服务器

使用前需要先部署上传服务器，上传服务器下载地址：

• github: https://github.com/wenshui2008/UploadServer
• gitee: https://gitee.com/chenfanyu/UploadServer

组件使用

示例工程可参考：

• github: https://github.com/chenfanyu/hyupload-vue2-demo
• gitee: https://gitee.com/chenfanyu/hyupload-vue2-demo

安装hyupload-vue2

npm install hyupload-vue2

引入 hyupload-vue2

import hyupload from 'hyupload-vue2';
import 'hyupload-vue2/lib/hyupload.css';
Vue.use(hyupload);

在vue文件中使用

<template>
  <div id="app">

    <hyupload :upload_url="upload_url"
              :up_media_ext="up_media_ext"
              :on-success="handleSuccess"
              :upload_maxfilesize="maxfilesize"
              :upload_limit="upload_limit"
    ></hyupload>

  </div>
</template>

<script>
export default {
  name: 'App',
  components: {},
  data() {
    return {
      maxfilesize: 2,	 //单位mB
      upload_limit: 2, 
      up_media_ext: '.mp4,.jpg,.jpeg,.png', //允许的上传格式
      // upload_url 上传地址: 请替换为实际的上传服务器地址
      // 高性能上传服务器下载地址：https://github.com/wenshui2008/UploadServer  https://gitee.com/chenfanyu/UploadServer
      upload_url: 'http://xxx.hyupload.com:8021', //断点上传

    };
  },

  methods: {
    handleSuccess(file) {
      console.log("上传成功的回调")
      console.log(file)
    },
  }
}
</script>

组件属性

| 属性名称 | 说明 | 类型 | | -------------- |------------------------------|------------------------------| | upload_maxfilesize | 最大文件尺寸，单位MB | number | | upload_limit | 最大允许上传个数 | number | | up_media_ext | 上传文件允许扩展名，逗号分隔，空为不限制 | string | | upload_url | 上传服务器服务器地址 | string | | on-success | 上传成功的回调函数，用于下一步插入数据库或其他 | function |