Skip to content

⬆️ magic upload image base on Vue.js Support paste, drag-drop, form -- Github issues like

Notifications You must be signed in to change notification settings

shuxiaokai/magic-upload-image

 
 

Repository files navigation

magic-upload-image

基于Vue.js 1.0 模拟Github issues 的图片上传组件

支持图片上传方式

  • 截图黏贴上传
  • 拖拽上传
  • 选择图片

Demo地址: demo

demo

实现方式

浏览器

  • 截图黏贴上传使用 paste 事件, 浏览器的支持度:caniuse paste
  • 拖拽上传 drop drag 事件
  • 选择图片 from 表单 change 事件

服务端 node

  • dev-upload.js 基于 express 写的开发用的图片上传服务,图片保存在本地,启动方式 npm run dev
  • koa-es6-server.js 基于 koa es6 写的图片上传服务,图片保存在本地, 启动方式 npm run koa
  • lean-server.js 基于 express 写的 leancloud node服务器,图片上传后保存在leancloud leancloud-code 文档

开发

# install dependencies
npm install

# serve with hot reload at localhost:3002
npm run dev

# build for production with minification
npm run build

# run koa server
npm run koa

发布到leancloud

# 安装lean工具
npm install -g leancloud-code

npm run build

lean add <app> <app-id>

# 发布测试
lean deploy

# 发布正式
lean publish

About

⬆️ magic upload image base on Vue.js Support paste, drag-drop, form -- Github issues like

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 97.6%
  • Vue 1.6%
  • HTML 0.8%