vue上传图片组件

所属分类:输入-上传

 18359  41  查看评论 (21)
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
相关插件-上传

webuploader 上传插件(根据官方做了小改)

webuploader上传插件,上图之前图片可编辑、可随意排版上传图片顺序
  上传
 23131  104

基于PhotoClip移动端上传图片裁剪

移动端上传图片裁剪插件简单版
  上传
 10126  71

js上传图片预览

js上传图片本地预览
  上传
 55583  201

jquery头像上传剪裁插件cropper

cropper是一款使用简单且功能强大的图片剪裁jQuery插件
  上传
 40825  324

讨论这个项目(21)回答他人问题或分享插件使用方法奖励jQ币

    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。

    回复
    不吃巧克力 0
    2017/11/22 14:22:16

    怎么没有按钮上传的

    回复
    清柠 0
    2017/11/6 11:05:05

    你好.请问后端怎么接受呢?

    我用PHP的,打印不出数据哦.

    回复
    dream 0
    2017/10/30 16:54:18
    怎么传中文图片就报错了,怎么解决呀 回复
    没素质比没文化更可怕。 0
    2017/10/28 10:29:10

    php怎么接收数据?

    回复
    凉城旧巷 0
    2017/10/16 10:47:48

    总的来说,图片文件上传的名字太长了,有没有一些简单的方法去处理一些

    楼主说一下,谢谢

                0
        2017/10/25 9:08:57

        如果你需要这些图片名字的话是没办法的,不需要就直接时间轴显示了

    回复
    你不知道的事 0
    2017/10/14 13:42:55

    您好,怎么加上文件数量限制,要多文本上传但也得有个数量限制

                0
        2017/10/25 9:08:12

        因为我账号被封了,这边就没怎么看了。你可以到website里的github问,限制版本我更新了

    回复
    Y. 0
    2017/10/11 13:02:03

    后端怎么接收数据呀

        Goodboy!0
        2017/10/11 14:25:25
        imgList对象里面都是file对象,直接ajax提交过去就行了
        凉城旧巷0
        2017/10/16 10:12:23

        能具体点吗大哥

    回复
    singercoder 1
    2017/9/21 17:58:26

    这个语法有些手机浏览器不支持

    fileAdd: function(file) {
        this.size = this.size + file.size; //总大小
        var reader = new FileReader();
        reader.vue = this;
        reader.readAsDataURL(file);
        reader.onload = function() {
            file.src = this.result;
            this.vue.imgList.push({
                file
            });
        }
    },

    ,去掉他,vue.js加载就正常了,加了他整个html里的vuejs就加载不了,大神改下吧,谢谢

        Goodboy!0
        2017/9/27 10:42:03

        这个是html5的语法,不兼容ie9以下的版本,手机也是

    回复
取消回复