一个基于Vue的移动端多文件上传插件,支持常见图片的上传。
2018-01-04 14:53
1311 查看
特性
多文件上传上传图片预览
上传状态监测
删除指定图片
清空图片
重新上传
安装
npm i vue-easy-uploader --save
使用
在入口文件main.js中加入以下代码:
import Vue from 'vue'import Vuex from 'vuex'import uploader from 'vue-easy-uploader' let store = new Vuex.Store({})Vue.use(uploader, store)
插件内部设置了状态管理,因此需要vuex的支持。
在Vue组件中使用
<uploader url="http://..."></uploader>
参数说明
url: 上传接口路径
需要与后端约定上传格式,使用表单提交方式,后端需获取
input[type='file']的
name属性,默认为
name="imgFiles[0]"、
name="imgFiles[1]"...数组序号从0递增。
上传成功时返回的数据如下:
示例代码
<template> <div> <uploader url="http://..." ></uploader> <div class="btn" @click="upload"> 上传 </div> </div></template> <script>import { mapState } from 'vuex'export default { data () { return { imgs: [] } }, computed: { ...mapState({ imgStatus: state => state.imgstore.img_status, imgPaths: state => state.imgstore.img_paths }) }, methods: { upload () { this.$store.commit('set_img_status', 'uploading') }, submit () { let values = [] for (let key of this.imgPaths) { values.push(key) } this.imgs = values console.log(this.imgs) } }, watch: { imgStatus () { if (this.imgStatus === 'finished') { this.submit() } } }, destoryed () { this.imgs = [] }}</script> <style scoped lang="less">.btn { width: 100%; height: 3em; background-color: green; color: #fff; display: flex; justify-content: center; align-items: center;}</style>
状态管理
状态管理存储在state.imgstore中,包括:state.imgstore.img_upload_cache # 上传文件缓存state.imgstore.img_status # 上传状态,包括 ready selected uploading finishedstate.imgstore.img_paths # 上传后的路径反馈数组(数据结构为Set集合)
img_status
整个上传过程都通过img_status判断,包括以下几个状态:
ready # 上传开始前的准备状态 selected # 已选择上传文件 uploading # 开始上传 finished # 上传完毕
开始上传
this.$store.commit('set_img_status', 'uploading')只需要改变状态管理中的
img_status为
uploading即可。
上传完成
methods: { submit () { // some code }}computed: { ...mapState({ imgStatus: state => state.imgstore.img_status })},watch: { imgStatus () { if (this.imgStatus === 'finished') { this.submit() } }}监视
state.imgstore.img_status,当状态变为
finished时,执行文件上传完成后的回调。
感谢分享 https://www.npmjs.com/package/vue-easy-uploader#%E7%89%B9%E6%80%A7
相关文章推荐
- 基于ajax的Html5文件上传插件,带进度并支持图片预览
- jQuery.form.js是一个form插件,支持ajax表单提交和ajax文件上传。
- 基于bootstrap的上传插件fileinput实现ajax异步上传功能(支持多文件上传预览拖拽)
- 支持多文件上传,预览,拖拽,基于bootstrap的上传插件fileinput的ajax异步上传
- sql server 关于表中只增标识问题 C# 实现自动化打开和关闭可执行文件(或 关闭停止与系统交互的可执行文件) ajaxfileupload插件上传图片功能,用MVC和aspx做后台各写了一个案例 将小写阿拉伯数字转换成大写的汉字, C# WinForm 中英文实现, 国际化实现的简单方法 ASP.NET Core 2 学习笔记(六)ASP.NET Core 2 学习笔记(三)
- 一个支持图片上传前预览,裁剪的vue组件
- 解决eWebEditor上传图片提示:请选择一个有效的文件,支持的格式有(GIF|JPG|JPEG|BMP|PNG)!
- 支持多文件上传,预览,拖拽,基于bootstrap的上传插件fileinput 的ajax异步上传(转载)
- 解决eWebEditor上传图片提示:请选择一个有效的文件,支持的格式有(GIF|JPG|JPEG|BMP|PNG)!
- 从0开始做一个的Vue图片/ 文件选择(上传)组件[基础向]
- 从0开始做一个的Vue图片/ 文件选择(上传)组件[基础向]
- 基于bootstrap的上传插件fileinput实现ajax异步上传功能(支持多文件上传预览拖拽)
- 基于JQuery的图片上传预览插件(图片预览、过滤文件类型、限制图片大小、图片显示后回调)
- 基于html5 canvas 的客户端异步上传图片的插件,支持客户端压缩图片尺寸
- Extjs 扩展Htmleditor,支持 图片上传 文件上传 插入flash 插入多媒体 插入层 插入横线等功能
- Joomla 插件 attachments 使用时出现不支持ZIP文件上传的错误
- EXTjs 同时支持文件上传和图片上传的htmleditor
- 一个项目的数据库数据丢失,upload文件上传的图片都有,怎么能把数据库信息找到
- 一个实用的文件上传类and生成图片缩略图(只提供上传)
- 基于jquery ajax 无刷新 文件批量上传插件 GooUploader整合struts2实现上传