先说一下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;
};
},
网友评论