🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

A multi-functional drag and drop image upload component just you have seen on the GitHub.

Form

Documentation

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 

You May Also Like