├── .browserslistrc ├── babel.config.js ├── postcss.config.js ├── public ├── favicon.ico └── index.html ├── .editorconfig ├── lib ├── index.js └── EleFormImageUploader.vue ├── vue.config.js ├── .gitignore ├── .npmignore ├── .eslintrc.js ├── example ├── main.js └── App.vue ├── .github └── workflows │ └── main.yml ├── LICENSE ├── package.json └── README.md /.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/app' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | autoprefixer: {} 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dream2023/vue-ele-form-image-uploader/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | [*.{js,jsx,ts,tsx,vue}] 2 | indent_style = space 3 | indent_size = 2 4 | trim_trailing_whitespace = true 5 | insert_final_newline = true 6 | -------------------------------------------------------------------------------- /lib/index.js: -------------------------------------------------------------------------------- 1 | import EleFormImageUploader from './EleFormImageUploader' 2 | 3 | if (typeof window !== 'undefined' && window.Vue) { 4 | window.Vue.component('image-uploader', EleFormImageUploader) 5 | } 6 | 7 | export default EleFormImageUploader 8 | -------------------------------------------------------------------------------- /vue.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | publicPath: process.env.NODE_ENV === 'production' ? './' : '/', 3 | css: { extract: false }, 4 | configureWebpack: { 5 | entry: './example/main.js', 6 | output: { 7 | libraryExport: 'default' 8 | } 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw? 22 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | tests 3 | docs 4 | documentation 5 | public 6 | vue.config.js 7 | coverage 8 | example 9 | jest.config.js 10 | .eslintrc.js 11 | cypress.json 12 | .browserslistrc 13 | postcss.config.js 14 | babel.config.js 15 | .editorconfig 16 | .cypress.json 17 | dist/demo.html 18 | .env.dev-doc 19 | .env.dev-example 20 | .idea 21 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | node: true 5 | }, 6 | 'extends': [ 7 | 'plugin:vue/essential', 8 | '@vue/standard' 9 | ], 10 | rules: { 11 | 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', 12 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off' 13 | }, 14 | parserOptions: { 15 | parser: 'babel-eslint' 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /example/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | import ElementUI from 'element-ui' 4 | import EleForm from 'vue-ele-form' 5 | import EleFormImageUploader from '../lib/index' 6 | import 'element-ui/lib/theme-chalk/index.css' 7 | 8 | Vue.config.productionTip = false 9 | 10 | Vue.use(ElementUI) 11 | Vue.use(EleForm, { 12 | upload: { 13 | fileSize: 10 14 | } 15 | }) 16 | Vue.component('image-uploader', EleFormImageUploader) 17 | 18 | new Vue({ 19 | render: h => h(App) 20 | }).$mount('#app') 21 | -------------------------------------------------------------------------------- /.github/workflows/main.yml: -------------------------------------------------------------------------------- 1 | name: gitub pages 2 | 3 | on: 4 | push: 5 | branches: 6 | - master 7 | paths: 8 | - lib/** 9 | - example/** 10 | - vue.config.js 11 | 12 | jobs: 13 | build-deploy: 14 | runs-on: ubuntu-latest 15 | 16 | steps: 17 | - uses: actions/checkout@master 18 | 19 | - name: install 20 | run: yarn 21 | 22 | - name: build 23 | run: yarn build 24 | 25 | - name: deploy 26 | uses: peaceiris/actions-gh-pages@v2.5.0 27 | env: 28 | ACTIONS_DEPLOY_KEY: ${{ secrets.ACTIONS_DEPLOY_KEY }} 29 | PUBLISH_BRANCH: gh-pages 30 | PUBLISH_DIR: ./dist 31 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | vue-ele-form-image-uploader 9 | 10 | 11 | 17 |
18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /lib/EleFormImageUploader.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 31 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 二当家的 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE.m -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-ele-form-image-uploader", 3 | "description": "vue-ele-form 的图片上传组件", 4 | "version": "0.1.9", 5 | "private": false, 6 | "scripts": { 7 | "build": "vue-cli-service build", 8 | "serve": "vue-cli-service serve", 9 | "lint": "vue-cli-service lint" 10 | }, 11 | "dependencies": { 12 | "vue-ele-upload-image": "^2.0.11" 13 | }, 14 | "repository": { 15 | "type": "git", 16 | "url": "https://github.com/dream2023/vue-ele-form-image-uploader" 17 | }, 18 | "main": "lib/index.js", 19 | "homepage": "https://github.com/dream2023/vue-ele-form-image-uploader", 20 | "keywords": [ 21 | "vue-ele-form", 22 | "image-uploader", 23 | "图片上传", 24 | "vue-uploader", 25 | "uploader", 26 | "image" 27 | ], 28 | "devDependencies": { 29 | "@vue/cli-plugin-babel": "^3.9.0", 30 | "@vue/cli-plugin-eslint": "^3.9.0", 31 | "@vue/cli-service": "^3.9.0", 32 | "@vue/eslint-config-standard": "^4.0.0", 33 | "babel-eslint": "^10.0.1", 34 | "core-js": "^2.6.5", 35 | "element-ui": "^2.10.1", 36 | "eslint": "^5.16.0", 37 | "eslint-plugin-vue": "^5.0.0", 38 | "lint-staged": "^8.1.5", 39 | "vue": "^2.6.10", 40 | "vue-ele-form": "^0.3.30", 41 | "vue-template-compiler": "^2.6.10" 42 | }, 43 | "gitHooks": { 44 | "pre-commit": "lint-staged" 45 | }, 46 | "lint-staged": { 47 | "*.{js,vue}": [ 48 | "vue-cli-service lint", 49 | "git add" 50 | ] 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /example/App.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 61 | 62 | 67 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue-ele-form-image-uploader | vue-ele-form 的图片上传扩展组件 2 | 3 | [![MIT Licence](https://badges.frapsoft.com/os/mit/mit.svg)](https://opensource.org/licenses/mit-license.php) 4 | [![npm](https://img.shields.io/npm/v/vue-ele-form-image-uploader.svg)](https://www.npmjs.com/package/vue-ele-form-image-uploader) 5 | [![download](https://img.shields.io/npm/dw/vue-ele-form-image-uploader.svg)](https://npmcharts.com/compare/vue-ele-form-image-uploader?minimal=true) 6 | 7 | ## 介绍 8 | 9 | vue-ele-form-image-uploader 做为 vue-ele-form 的第三方扩展, 通过对 [vue-ele-upload-image](https://github.com/dream2023/vue-ele-upload-image) 的封装, 大大增强的上传图片的功能, 包括 `单张图片模式`/`多张图片模式`/`拖拽上传`/`裁剪上传` 的特性 10 | 11 | ![image](https://raw.githubusercontent.com/dream2023/images/master/vue-ele-form-image-uploader.6clreq9us6l.gif) 12 | 13 | ## 安装 14 | 15 | ```bash 16 | npm install vue-ele-form-image-uploader --save 17 | ``` 18 | 19 | ## 使用 20 | 21 | ```js 22 | import EleForm from 'vue-ele-form' 23 | import EleFormImageUploader from 'vue-ele-form-image-uploader' 24 | // 注册 ele-form 25 | Vue.use(EleForm, { 26 | // 对所有具有上传属性的组件适用 27 | upload: { 28 | fileSize: 10 29 | }, 30 | // 可以在这里设置全局的 image-uploader 属性 31 | // 属性参考下面的 #attrs 32 | 'image-uploader': { 33 | action: 'https://jsonplaceholder.typicode.com/posts' // 上传地址 34 | } 35 | }) 36 | 37 | // 注册 image-uploader 组件 38 | Vue.component('image-uploader', EleFormImageUploader) 39 | ``` 40 | 41 | ```js 42 | formDesc: { 43 | xxx: { 44 | label: 'xxx', 45 | // 只需要在这里指定为 image-uploader 即可 46 | type: 'image-uploader', 47 | // 属性参考下面的 #attrs 48 | attrs: { 49 | action: 'https://jsonplaceholder.typicode.com/posts', // 上传地址 50 | data: {token: 'xxx'}, // 附带数据 51 | // 上传后对响应处理, 拼接为一个图片的地址 52 | responseFn(response, file, fileList) { 53 | // 根据响应结果, 设置 URL 54 | return 'https://xxx.xxx.com/image/' + response.id 55 | } 56 | } 57 | } 58 | } 59 | ``` 60 | 61 | ## 示例 62 | 63 | ```html 64 | 78 | 79 | 122 | 123 | 128 | ``` 129 | 130 | ## attrs 131 | 132 | > 属性具体含义, 请参考: [vue-ele-upload-image](https://github.com/dream2023/vue-ele-upload-image) 133 | 134 | ```js 135 | attrs: { 136 | // 响应处理函数 137 | responseFn: Function, 138 | // 是否剪裁 139 | crop: { 140 | type: Boolean, 141 | default: false 142 | }, 143 | // 裁剪高度 144 | cropHeight: { 145 | type: Number 146 | }, 147 | // 裁剪宽度 148 | cropWidth: { 149 | type: Number 150 | }, 151 | // 图片显示大小 152 | size: { 153 | type: Number, 154 | default: 150 155 | }, 156 | // 大小限制(MB) 157 | fileSize: { 158 | type: Number 159 | }, 160 | // 是否显示提示 161 | isShowTip: { 162 | type: Boolean, 163 | default: true 164 | }, 165 | // 弹窗标题 166 | title: String, 167 | // 图片懒加载 168 | lazy: { 169 | type: Boolean, 170 | default: false 171 | }, 172 | // 文件类型, 例如['png', 'jpg', 'jpeg'] 173 | fileType: { 174 | type: Array 175 | }, 176 | // 缩略图后缀, 例如七牛云缩略图样式 (?imageView2/1/w/20/h/20) 177 | // 如果存在, 则列表显示是加缩略图后缀的, 弹窗不带缩略图后缀 178 | thumbSuffix: { 179 | type: String, 180 | default: '' 181 | }, 182 | // 上传地址 (同官网) 183 | action: { 184 | type: String, 185 | required: true 186 | }, 187 | // 设置上传的请求头部(同官网) 188 | headers: Object, 189 | // 文件个数显示(同官网) 190 | limit: Number, 191 | // 是否启用拖拽上传 (同官网) 192 | drag: { 193 | type: Boolean, 194 | default: false 195 | }, 196 | // 支持发送 cookie 凭证信息 (同官网) 197 | withCredentials: { 198 | type: Boolean, 199 | default: false 200 | }, 201 | // 是否支持多选文件 (同官网) 202 | multiple: { 203 | type: Boolean, 204 | default: false 205 | }, 206 | // 上传时附带的额外参数(同官网) 207 | data: Object, 208 | // 上传的文件字段名 (同官网) 209 | name: { 210 | type: String, 211 | default: 'file' 212 | }, 213 | // 覆盖默认的上传行为，可以自定义上传的实现 (同官网) 214 | httpRequest: Function, 215 | // 接受上传的文件类型（thumbnail-mode 模式下此参数无效）(同官网) 216 | accept: String 217 | } 218 | ``` 219 | 220 | ## 相关链接 221 | 222 | - [vue-ele-upload-image](https://github.com/dream2023/vue-ele-upload-image) 223 | - [vue-ele-form](https://github.com/dream2023/vue-ele-form) 224 | - [element-ui](http://element-cn.eleme.io) 225 | --------------------------------------------------------------------------------