移动端vue项目的图片上传插件
有一移动端项目，使用的vant-ui。可是vant自带的Uploader似乎不支持一次选择多张图片上传的功能。
于是乎：在https://www.npmjs.com/查找发现找到 vue-upload-component 组件，功能基本都有，评价也不错，目前有1500多个star。
因为是国人开发的，所有比较完善的中文文档。
使用：
1.安装：
npm install vue-upload-component --save
2.在main.js中全局引入
const VueUploadComponent = require('vue-upload-component')
Vue.component('file-upload', VueUploadComponent)
3.测试例子：test.vue
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue-upload-component Test</title>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-upload-component"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="file in files">{{file.name}} - Error: {{file.error}}, Success: {{file.success}}</li>
</ul>
<file-upload
ref="upload"
v-model="files"
post-action="/post.method"
put-action="/put.method"
@input-file="inputFile"
@input-filter="inputFilter"
>
上传文件
</file-upload>
<button v-show="!$refs.upload || !$refs.upload.active" @click.prevent="$refs.upload.active = true" type="button">开始上传</button>
<button v-show="$refs.upload && $refs.upload.active" @click.prevent="$refs.upload.active = false" type="button">停止上传</button>
</div>
<script>
new Vue({
el: '#app',
data: function () {
return {
files: []
}
},
components: {
FileUpload: VueUploadComponent
},
methods: {
/**
* Has changed
* @param Object|undefined newFile 只读
* @param Object|undefined oldFile 只读
* @return undefined
*/
inputFile: function (newFile, oldFile) {
if (newFile && oldFile && !newFile.active && oldFile.active) {
// 获得相应数据
console.log('response', newFile.response)
if (newFile.xhr) {
// 获得响应状态码
console.log('status', newFile.xhr.status)
}
}
},
/**
* Pretreatment
* @param Object|undefined newFile 读写
* @param Object|undefined oldFile 只读
* @param Function prevent 阻止回调
* @return undefined
*/
inputFilter: function (newFile, oldFile, prevent) {
if (newFile && !oldFile) {
// 过滤不是图片后缀的文件
if (!/\.(jpeg|jpe|jpg|gif|png|webp)$/i.test(newFile.name)) {
return prevent()
}
} // 创建 blob 字段 用于图片预览
newFile.blob = ''
let URL = window.URL || window.webkitURL
if (URL && URL.createObjectURL) {
newFile.blob = URL.createObjectURL(newFile.file)
}
}
}
});
</script>
</body>
</html>
说明：如果不想用提供的post-action或put-action方法，可以使用自定义的上传方法custom-action
该custom-action方法 优先级高于 put-action, post-action
移动端vue项目的图片上传插件的更多相关文章
- 百度ueditor vue项目应用 -- 图片上传源码修改
本文目的有两个,一.废掉单图上传,二.改造多图上传 大家都知道百度ueditor不是针对vue项目开发的,官方文档提供的源码包里有需要后端配置的接口,but到vue项目就不太好办了,网上有些文章也介绍 ...
- ssm项目中KindEditor的图片上传插件，浏览器兼容性问题
解决办法: 原因:使用@ResponseBody注解返回java对象,在浏览器中是Content-Type:application/json;charset=UTF-8 我们需要返回字符串(Strin ...
- WebUploader文件图片上传插件的使用
最近在项目中用到了百度的文件图片上传插件WebUploader.分享给大家 需要在http://fex.baidu.com/webuploader/download.html点击打开链接下载WebUp ...
- Jquery自定义图片上传插件
1 概述 编写后台网站程序大多数用到文件上传,可是传统的文件上传控件不是外观不够优雅,就是性能不太好看,翻阅众多文件上传控件的文章,发现可以这样去定义一个文件上传控件,实现的文件上传的效果图如下: 2 ...
- Aps.net中基于bootstrapt图片上传插件的应用
Aps.net中基于bootstrapt图片上传插件的应用 在最近的项目中需要使用一个图片上传的功能,而且是多张图片同时上传到服务器的文件夹中,将图片路径存放在数据库中.为了外观好看使用了bootst ...
- ueditor图片上传插件的使用
在项目里使用到ueditor图片上传插件,以前图片上传都是直接使用js代码直接上传图片,比较麻烦,而且效率也比较低,而ueditor这款插件完美的解决了这个问题,这个是百度开发的一款富文本编辑器,在这 ...
- kindeditor 图片上传插件
富文本编辑器,kindeditor是比较好用的一款.需要的功能都有,文档.demo也详细.有什么功能去官网看一眼就好. 官网:http://kindeditor.net/ 一些好用的如图片上传,kin ...
- 用Vue来实现图片上传多种方式
没有业务场景的功能都是耍流氓,那么我们先来模拟一个需要实现的业务场景.假设我们要做一个后台系统添加商品的页面,有一些商品名称.信息等字段,还有需要上传商品轮播图的需求. 我们就以Vue.Element ...
- Js 之移动端图片上传插件mbUploadify
一.下载 https://pan.baidu.com/s/1NEL4tkHoK4ydqdMi_hgWcw 提取码:vx7e 二.Demo示例 <div class="weui_uplo ...
随机推荐
- 17.Linux搭建网络仓库
1.搭建一个网络仓库 服务端:10.0.0.201 1.准备软件包(1.光盘 2.缓存 3.联网下载 4.同步) 1.挂载光盘 mount /dev/cdrom 2.通过ftp共享软件包存放的目录 y ...
- Rust入坑指南：千人千构
坑越来越深了,在坑里的同学让我看到你们的双手! 前面我们聊过了Rust最基本的几种数据类型.不知道你还记不记得,如果不记得可以先复习一下.上一个坑挖好以后,有同学私信我说坑太深了,下来的时候差点崴了脚 ...
- Nginx初学（一）安装与运行
1.下载nginx安装包 nginx-1.6.3.tar.gz并复制安装包到 /usr/local/software中 2.安装依赖包,命令如下: yum -y install gcc-c++(需要等 ...
- 微信小程序如何发送订阅消息，正确姿势来了，建议收藏！
小程序订阅消息公测已经有些日子,今天以世界上最好的语言(PHP)为例,说一下如何发送订阅消息. 1.订阅消息 其实如果用过模板消息的话,改用订阅消息挺简单的,看一下官方文档稍加摸索就能使用. 但是对于 ...
- django测试开发-1.开始Hello django！
用python开发出一个web页面的时候,需要找一个支持python语言的web框架.django框架有丰富的文档和学习资料,也是非常成熟的web开发框架,本篇写一个简单的“hello django! ...
- fenby C语言 P29
野指针 malloc()分配内存: free()释放内存: p=(char*)malloc(100): #include <stdio.h>#include <stdlib.h> ...
- kaldi中CD-DNN-HMM网络参数更新公式手写推导
在基于DNN-HMM的语音识别中,DNN的作用跟GMM是一样的,即它是取代GMM的,具体作用是算特征值对每个三音素状态的概率,算出来哪个最大这个特征值就对应哪个状态.只不过以前是用GMM算的,现在用D ...
- JavaFX简介和Scene Builder工具的安装使用简易教程
JavaFX概述和简介 富互联网应用是那些提供与Web应用程序类似的功能,并可作为桌面应用程序体验的应用.与用户的正常网络应用程序相比,它们提供更好的视觉体验.这些应用程序可作为浏览器插件或作为虚拟机 ...
- 洛谷P5522 【[yLOI2019] 棠梨煎雪】
区间操作考虑用线段树维护. 建\(n*2\)棵线段树,前\(n\)棵线段树维护每个串的第i位是否是0. 后\(n\)棵线段树维护每个串的第i位是否是1. 如果是问号的话,直接跳过就好(通过1和0能看出 ...
- [考试反思]1029csp-s模拟测试92：弱智
我只能这么评价我自己. 看这个提交时间...我没话可说... T1半个世界都A了还是切不掉.又一次挂细节. T2不会证明的乱搞(虽然可以证明)A了没什么可说的算是水过. T3之前水过的题(打的次正解) ...