有一移动端项目，使用的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项目的图片上传插件的更多相关文章

  1. 百度ueditor vue项目应用 -- 图片上传源码修改

    本文目的有两个,一.废掉单图上传,二.改造多图上传 大家都知道百度ueditor不是针对vue项目开发的,官方文档提供的源码包里有需要后端配置的接口,but到vue项目就不太好办了,网上有些文章也介绍 ...

  2. ssm项目中KindEditor的图片上传插件，浏览器兼容性问题

    解决办法: 原因:使用@ResponseBody注解返回java对象,在浏览器中是Content-Type:application/json;charset=UTF-8 我们需要返回字符串(Strin ...

  3. WebUploader文件图片上传插件的使用

    最近在项目中用到了百度的文件图片上传插件WebUploader.分享给大家 需要在http://fex.baidu.com/webuploader/download.html点击打开链接下载WebUp ...

  4. Jquery自定义图片上传插件

    1 概述 编写后台网站程序大多数用到文件上传,可是传统的文件上传控件不是外观不够优雅,就是性能不太好看,翻阅众多文件上传控件的文章,发现可以这样去定义一个文件上传控件,实现的文件上传的效果图如下: 2 ...

  5. Aps.net中基于bootstrapt图片上传插件的应用

    Aps.net中基于bootstrapt图片上传插件的应用 在最近的项目中需要使用一个图片上传的功能,而且是多张图片同时上传到服务器的文件夹中,将图片路径存放在数据库中.为了外观好看使用了bootst ...

  6. ueditor图片上传插件的使用

    在项目里使用到ueditor图片上传插件,以前图片上传都是直接使用js代码直接上传图片,比较麻烦,而且效率也比较低,而ueditor这款插件完美的解决了这个问题,这个是百度开发的一款富文本编辑器,在这 ...

  7. kindeditor 图片上传插件

    富文本编辑器,kindeditor是比较好用的一款.需要的功能都有,文档.demo也详细.有什么功能去官网看一眼就好. 官网:http://kindeditor.net/ 一些好用的如图片上传,kin ...

  8. 用Vue来实现图片上传多种方式

    没有业务场景的功能都是耍流氓,那么我们先来模拟一个需要实现的业务场景.假设我们要做一个后台系统添加商品的页面,有一些商品名称.信息等字段,还有需要上传商品轮播图的需求. 我们就以Vue.Element ...

  9. Js 之移动端图片上传插件mbUploadify

    一.下载 https://pan.baidu.com/s/1NEL4tkHoK4ydqdMi_hgWcw 提取码:vx7e 二.Demo示例 <div class="weui_uplo ...

随机推荐

  1. Git & Github 使用教程【1】入门篇

    Github教程 1-1 版本管理工具简介 主要作用:备份文件.记录历史.回到过去.多端共享.独挡一面.团队协作 2-1 版本管理工具发展历史 3-1 Git下载和安装[略] 3-2 linux下安装 ...

  2. springcloud之Feign、ribbon设置超时时间和重试机制的总结

    一 超时时间配置 如果在一个微服务当中对同一个接口同时配置了Hystrix与ribbon两个超时时间,则在接口调用的时候,两个计时器会同时读秒. 比如,访问一个接口需要2秒,你的ribbon配置的超时 ...

  3. C#开发命令执行驱动程序 之 读入命令行参数

    /// <summary> /// 在cmd窗体内执行如下: /// OrderDriverApp.exe Order Driver App /// 返回: /// The args ar ...

  4. Swagger解决你手写API接口文档的痛

    首先,老规矩,我们在接触新事物的时候, 要对之前学习和了解过的东西做一个总结. 01 痛     苦 不做.不行 之前,前后端分离的系统由前端和后端不同的编写,我们苦逼的后端工程师会把自己已经写完的A ...

  5. php curl 生成的cookie 文件含义 cookie 属性含义

    最近用了curl 感觉还是很方便的,看了下curl生成的 cookie 文件 格式 , 对其中一些值的含义不是很明白,去找了些cookie的资料看了下,做下备忘 PHP curl 生成 的 cooki ...

  6. xml 需要转义的字符

    XML实体中不允许出现"&","<",">"等特殊字符,否则XML语法检查时将出错,如果编写的XML文件必须包含这些字符 ...

  7. 【XSY2525】Maze 2017多校

    Description 考虑一个 N×M 的网格,每个网格要么是空的,要么是障碍物.整个网格四周都是墙壁(即第1行和第n行,第1列和第m列都是墙壁),墙壁有且仅有两处开口,分别代表起点和终点.起点总是 ...

  8. 论文阅读 Prefetch-aware fingerprint cache management for data deduplication systems

    论文链接 https://link.springer.com/article/10.1007/s11704-017-7119-0 这篇论文试图解决的问题是在cache 环节之前,prefetch-ca ...

  9. Lab_1：练习3——分析bootloader进入保护模式的过程

    文章链接:https://www.cnblogs.com/cyx-b/p/11809742.html 作者:chuyaoxin 一.实验内容 BIOS将通过读取硬盘主引导扇区到内存,并转跳到对应内存中 ...

  10. Matplotlib 中常见的图形

    # 导包 from matplotlib import pyplot as plt import numpy as np 线性图 简单线性图 在图表的所有类型中,线性图最为简单.线性图的各个数据点由一 ...