npm

Author: Youzi-io

.editorconfig

@@ -0,0 +1,5 @@
+[*.{js,jsx,ts,tsx,vue}]
+indent_style = space
+indent_size = 2
+trim_trailing_whitespace = true
+insert_final_newline = true

.gitignore

@@ -0,0 +1,23 @@
+.DS_Store
+node_modules
+/dist
+
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

.npmignore

@@ -0,0 +1,9 @@
+# 忽略目录
+examples/
+packages/
+public/
+ 
+# 忽略指定文件
+vue.config.js
+babel.config.js
+*.map

README.md

@@ -0,0 +1,34 @@
+# vue-uploader-files
+
+## 安装
+```
+npm install vue-uploader-files
+```
+
+### main.js引入
+```
+import upfile from 'vue-uploader-files';
+import 'vue-uploader-files/lib/vue-uploader-files.css';
+Vue.use(upfile);
+```
+
+### 使用
+```
+<up-file @upfile="upfile"></up-file>
+```
+
+### Attribute
+
+|  参数   | 说明  | 类型  | 可选值  | 默认值  |
+|  ----  | ----  | ----  | ----  | ----  |
+| styleSwitch  | 是否使用样式(不包含背景色和文字颜色) | Boolean | true,false | true |
+| fileName  | 上传的文件字段名 | String | — | file |
+| text  | 文本内容 | String | — | 选择文件 |
+| backgroundColor  | 背景颜色 | String | — | #0096fa |
+| color  | 文本颜色 | String | — | #f5f5f5 |
+
+### Methods
+
+|  方法名   | 说明  | 参数  |
+|  ----  | ----  | ----  |
+|  upfile   | 返回数据  | (formdata:返回的FormData数据)  |

babel.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}

examples/App.vue

@@ -0,0 +1,19 @@
+<template>
+  <div id="app">
+    <up-file @upfile="upfile"></up-file>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'App',
+  components: { },
+  methods: {
+    upfile (formdata) {
+      console.log(formdata.get('file'))
+    }
+  }
+}
+</script>
+
+<style lang="less"></style>

examples/components/index.vue

@@ -0,0 +1,67 @@
+<template>
+  <div
+    :class="{ 'up-file': styleSwitch }"
+    :style="{ backgroundColor: backgroundColor, color: color }"
+    @click="proposal"
+  >
+    <span>{{text}}</span>
+    <input type="file" :name="fileName" id="file" ref="file" @change="upfile" />
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    fileName: {
+      type: String,
+      default: 'file'
+    },
+    text: {
+      type: String,
+      default: '选择文件'
+    },
+    backgroundColor: {
+      type: String,
+      default: '#0096fa'
+    },
+    color: {
+      type: String,
+      default: '#f5f5f5'
+    },
+    styleSwitch: {
+      type: Boolean,
+      default: true
+    }
+  },
+  methods: {
+    proposal () {
+      this.$refs.file.click()
+    },
+    upfile () {
+      const formdata = new FormData()
+      formdata.append(this.$props.fileName, this.$refs.file.files[0])
+      this.$emit('upfile', formdata)
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.up-file {
+  width: 232px;
+  height: 46px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 14px 80px;
+  line-height: 1;
+  font-size: 18px;
+  font-weight: 700;
+  border-radius: 5px;
+  box-sizing: border-box;
+  cursor: pointer;
+  #file {
+    display: none;
+  }
+}
+</style>

examples/main.js

@@ -0,0 +1,12 @@
+import Vue from 'vue'
+import App from './App.vue'
+
+import upfile from '../packages/index'
+
+Vue.use(upfile)
+
+Vue.config.productionTip = false
+
+new Vue({
+  render: h => h(App)
+}).$mount('#app')

lib/demo.html

@@ -0,0 +1,10 @@
+<meta charset="utf-8">
+<title>vue-uploader-files demo</title>
+<script src="./vue-uploader-files.umd.js"></script>
+
+<link rel="stylesheet" href="./vue-uploader-files.css">
+
+
+<script>
+console.log(vue-uploader-files)
+</script>