vue上传图片组件

所属分类:输入-上传

 105388  397  查看评论 (35)
分享到微信朋友圈
X
vue上传图片组件 ie兼容9

更新时间:2017/9/29 下午3:37:56

更新说明:

1. 优化图片和文件显示

2. 支持拖拽文件夹上传


vue_upload

vue上传demo,支持多选,拖拽上传

Build Setup

# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
# build for production and view the bundle analyzer report
npm run build --report
相关插件-上传

jQuery图片上传展示插件imgFileupload.js

jQuery图片上传展示,支持多图上传,限制图片上传个数
  上传
 110254  506

pc端图片批量上传,可拖动图片交换位置

jQuery可批量上传图片 可以拖动交换位置 可删除
  上传
 62445  459

图片预览上传插件bootstrap-fileinput.js

bootstrapfileinput预览上传图片并使用FmData上传,上传url根据实际情况填写
  上传
 84519  493

图片上传插件

图片上传插件
  上传
 85775  391

讨论这个项目(35)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    WOW 0
    2019/4/1 17:43:51
    你好,请问怎样支持上传zip压缩文件呢 回复
    小龙24417 0
    2019/3/13 17:51:01

    随便在哪里加一个按钮,然后绑定下面这个方法,至于PHP代码随便框架都有批量上传文件

    uploadImage: function() {
        var data = new FormData();
        for (var i = 0; i < this.imgList.length; i++) {
            data.append("file", this.imgList[i].file);
        }
        $.ajax({
            url: "/WorkOrder/upload",
            type: 'POST',
            data: data,
            dataType: 'JSON',
            cache: false,
            processData: false,
            contentType: false,
            success: function(ret) {
                console.log(ret);
            }
        });
    }
        你卟会了解0
        2019/3/21 11:49:52
        Uncaught ReferenceError: $ is not defined.按照你的写了,这个样子
        Alixios0
        2019/7/17 10:47:33
        这报错是不是你没引入jquery
    回复
    web 0
    2018/8/14 11:14:20
    你好,请问下这个手机上使用时候,怎么让它打开默认打开相册啊(现在手机打开是默认打开的图片文件夹,不是相册【安卓手机】)?
    还有一点,在哪里设置修改上传的图片张数呢?希望解答一下,谢谢 回复
    孙奇美--龙玲 0
    2018/5/14 10:16:57
    ie8下完蛋
        星宇0
        2018/8/13 11:03:55
        vue需要h5的吧= =
    回复
    路易保罗 (O&N壁纸布艺 0
    2018/3/24 16:01:51
    php后台怎么接收数据?哪位大佬给个模板
        小平头0
        2018/8/28 17:38:48
        解决了吗?
    回复
    路易保罗 (O&N壁纸布艺 0
    2018/3/24 16:00:59
    后台怎么接收数据啊?谁能发个接收代码 回复
    0
    2018/2/28 19:52:21
    controller层应该用哪个属性名获取图片集合
        戏弄、表情0
        2018/11/6 17:39:58
        应该可以用这个吧
        MultipartFile
    回复
    haoahoxuexi 0
    2018/2/26 18:06:46
    请问楼主,你这里是将图片转换成base64,然后信息放在imglist里是吗?我想将图片上传存储到服务器中,这里是直接存储base64编码,还是应该怎么存储呢?请赐教。 回复
    659748 0
    2018/1/5 12:32:15

    你好  请问添加文件可以获取到图片的尺寸,长宽吗?

        6597480
        2018/1/6 17:11:06
        var img = new Image();
        img.src = this.result;
        img.onload = function (){
            console.log(img.width)
            console.log(img.height) 
        }

        这样解决了  感谢作者的插件!

    回复
    0
    2017/12/2 23:29:16

    请问怎么用ajax提交 imgList  我用ajax 会显示错误

    Array [ {…}, {…}, {…} ]test.html:175:13File.lastModifiedDate 已不赞成使用。请改用 File.lastModified。

    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复