美文网首页
用node上传图片

用node上传图片

作者: 路灯下de男孩 | 来源:发表于2018-12-03 10:28 被阅读0次

先说一下js的请求部分

    function upload_picture(el,str){// 元素,传给node的文件夹名称;
        str = str || 'company';// 如果文件夹名称为空默认成company;
        str = escape(str);// 对文件夹名称进行转义否则中文会出现乱码
        var enclosureSize=el.get(0).files[0].size;//单文b 获取到文件大小 如果要兼容低版本IE自己做兼容就好了
        if(el.get(0).files[0].type!="image/jpeg" && el.get(0).files[0].type!="image/png"){// 判断文件的后缀是否符合标准
            console.log(el);
            $(el).removeAttr('disabled').val('');
            $(el).removeProp('disabled').val('');
            // Modal.err('请上传正确格式的图片');
            return false;
        }
        enclosureSize=enclosureSize/1024/1024;
        if(enclosureSize>1){// 图片大小是否符合标准
            $(el).removeAttr('disabled').val('');
            $(el).removeProp('disabled').val('');
            // Modal.err('上传的图片不能大于1M,请重新上传!');
            return false;
        }
        var suffixName=el.val().substring(el.val().indexOf('.'),el.val().length);
        var formData=new FormData();// new FormData() 用来存储图片传输给node
        var files=el.get(0).files[0];// 文件
        formData.append('file',files);// 将文件放入formData
//      console.log(files);
//      console.log(formData);
        $.ajax({// 数据请求
            type:"post",
            url:'/publicUpload?imgSrc='+str+'&suffixName='+suffixName, // url里加了img的 文件夹名称和图片的后缀(png/jpg/gif);
            async:true,
            data : formData, 
            processData : false, // 告诉jQuery不要去处理发送的数据
            contentType : false,// 告诉jQuery不要去设置Content-Type请求头
            beforeSend:function(){
                console.log("正在进行,请稍候");// 这里可以写上传时的动画等
            },
            success:function(data){// 上传成功就ok了啊
                // 在这里处理data就好了
            },
            error:function(err){
                console.log(err);
            }
        });
    }

js请求就是这些了
再说一下node部分
启动服务什么的不会的自行搜索;
我这node用的koa;

        
        var uuid = require('uuid');
        var kparse=require('co-busboy');
        var fs=require('fs');
    // 上传图片
    publicUpload: function(ctx) {
        return function *() {
            var suffixName=ctx.query.suffixName;// 获取到后缀名
            var imgSrc=ctx.query.imgSrc;// 获取到想存放文件的文件夹名称
            imgSrc = unescape(imgSrc);// 对文件夹名称进行解转义
            var parts = kparse(ctx,{autoFields:true});
            var uuid_v = uuid.v1();// 随机生成一个文件名怕上传的图片名称重复啊
                        // config.dc_upload_path   是配置的固定存放上传图片的地址
        if(fs.existsSync(config.dc_upload_path+'/'+imgSrc)){// 判断图片地址是否存在
            }else{// 不存在时创建对应的地址;可以配合深层创建node文件夹的方法 地址:‘https://www.jianshu.com/p/eb7b464a06c9’
                util.mkdir(config.dc_upload_path+'/'+imgSrc);
            }
            var part;// 将图片写入到对应的文件夹下
            while(part = yield parts){
                if(!part.length) {
                    part.pipe(fs.createWriteStream(config.dc_upload_path+'/'+imgSrc+'/'+uuid_v+suffixName));
                }
            }
                    // 成功之后返回给前台页面结果就ok了啊
            var data={
                status:1,
                src:'/'+imgSrc+'/'+uuid_v+suffixName
            }
            ctx.body=data;
        };
    },

相关文章

网友评论

      本文标题:用node上传图片

      本文链接:https://www.haomeiwen.com/subject/xliecqtx.html