init

Author: dream2023

.gitignore

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

.npmignore

@@ -0,0 +1,16 @@
+node_modules
+tests
+docs
+documentation
+public
+vue.config.js
+coverage
+jest.config.js
+.eslintrc.js
+cypress.json
+postcss.config.js
+babel.config.js
+.editorconfig
+.cypress.json
+dist/demo.html
+.browserslistrc

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 二当家的
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,166 @@
+# vue-ele-upload-file | 使 element-ui upload 组件更简单、好用
+
+[![license](https://img.shields.io/npm/l/vue-ele-upload-file.svg)](https://dream2023.github.io/vue-ele-upload-file/)
+[![npm](https://img.shields.io/npm/v/vue-ele-upload-file.svg)](https://www.npmjs.com/package/vue-ele-upload-file)
+[![size](https://img.shields.io/bundlephobia/minzip/vue-ele-upload-file.svg)](https://www.npmjs.com/package/vue-ele-upload-file)
+[![download](https://img.shields.io/npm/dw/vue-ele-upload-file.svg)](https://npmcharts.com/compare/vue-ele-upload-file?minimal=true)
+
+![image](https://raw.githubusercontent.com/dream2023/images/master/vue-ele-upload-file.17yo68suvvo.gif)
+
+## 安装
+
+```bash
+npm install vue-ele-upload-file --save
+```
+
+### 用法
+
+```js
+import EleUploadFile from 'vue-ele-upload-file'
+
+export default {
+  components: {
+    EleUploadFile
+  }
+}
+```
+
+## 示例
+
+### 简单用法
+
+```html
+<template>
+  <ele-upload-file
+    :responseFn="handleResponse"
+    action="https://jsonplaceholder.typicode.com/posts/"
+    v-model="file"
+  />
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        file: []
+      }
+    },
+    methods: {
+      // 对请求结果处理, 返回对象
+      handleResponse(response, file) {
+        return {
+          url: URL.createObjectURL(file.raw),
+          name: file.name,
+          size: file.size
+        }
+      }
+    }
+  }
+</script>
+```
+
+### 增加属性
+
+```html
+<template>
+  <ele-upload-file
+    :disabled="false"
+    :file-type="['doc', 'pdf', 'png', 'jpeg', 'jpg']"
+    :fileSize="2"
+    :isCanDelete="true"
+    :isCanDownload="true"
+    :isCanUploadSame="true"
+    :isShowSize="true"
+    :isShowTip="true"
+    :limit="6"
+    :multiple="true"
+    :responseFn="handleResponse"
+    action="https://jsonplaceholder.typicode.com/posts/"
+    placeholder="上传附件"
+    v-model="file"
+  />
+</template>
+```
+
+## Props 参数
+
+```js
+  props: {
+    // 值
+    value: [String, Object, Array],
+    // 必选参数，上传的地址
+    // 同 element-ui upload 组件
+    action: {
+      type: String,
+      required: true
+    },
+    // 大小限制(MB)
+    fileSize: Number,
+    // 响应处理函数
+    responseFn: Function,
+    // 文件类型, 例如['png', 'jpg', 'jpeg']
+    fileType: Array,
+    // 提示
+    placeholder: String,
+    // 是否禁用
+    disabled: Boolean,
+    // 是否显示文件大小
+    isShowSize: {
+      type: Boolean,
+      default: true
+    },
+    // 是否显示下载
+    isCanDownload: {
+      type: Boolean,
+      default: true
+    },
+    // 是否可删除
+    isCanDelete: {
+      type: Boolean,
+      default: true
+    },
+    // 是否可上传相同文件
+    isCanUploadSame: {
+      type: Boolean,
+      default: true
+    },
+    // 是否显示提示
+    isShowTip: {
+      type: Boolean,
+      default: true
+    },
+    // 设置上传的请求头部
+    // 同 element-ui upload 组件
+    headers: Object,
+    // 是否支持多选文件
+    // 同 element-ui upload 组件
+    multiple: {
+      type: Boolean,
+      default: true
+    },
+    // 上传时附带的额外参数
+    // 同 element-ui upload 组件
+    data: Object,
+    // 上传的文件字段名
+    // 同 element-ui upload 组件
+    name: {
+      type: String,
+      default: 'file'
+    },
+    // 支持发送 cookie 凭证信息
+    // 同 element-ui upload 组件
+    withCredentials: {
+      type: Boolean,
+      default: false
+    },
+    // 接受上传的文件类型
+    // 同 element-ui upload 组件
+    accept: String,
+    // 最大允许上传个数
+    // 同 element-ui upload 组件
+    limit: Number
+  },
+```
+
+## 相关链接
+
+- [element-ui upload 组件](https://element.eleme.cn/#/zh-CN/component/upload)

babel.config.js

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

example/App.vue

@@ -0,0 +1,38 @@
+<template>
+  <div style="max-width: 800px;margin: 50px auto">
+    <ele-upload-file
+      :disabled="false"
+      :file-type="['svg', 'html', 'js', 'css', 'doc', 'xls', 'zip']"
+      :fileSize="0.2"
+      :isCanDelete="true"
+      :isCanDownload="true"
+      :isCanUploadSame="true"
+      :isShowSize="true"
+      :isShowTip="true"
+      :limit="6"
+      :multiple="false"
+      :responseFn="handleResponse"
+      action="https://jsonplaceholder.typicode.com/posts/"
+      placeholder="上传附件"
+      v-model="file"
+    />
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      file: []
+    }
+  },
+  methods: {
+    handleResponse (response, file) {
+      return {
+        url: URL.createObjectURL(file.raw),
+        name: file.name,
+        size: file.size
+      }
+    }
+  }
+}
+</script>

example/main.js

@@ -0,0 +1,13 @@
+import Vue from 'vue'
+import App from './App.vue'
+import ElementUI from 'element-ui'
+import 'element-ui/lib/theme-chalk/index.css'
+import EleUploadFile from '../lib/index'
+
+Vue.config.productionTip = false
+Vue.use(ElementUI)
+Vue.component('ele-upload-file', EleUploadFile)
+
+new Vue({
+  render: h => h(App)
+}).$mount('#app')