nodejs+express+ajax实现图片上传及显示

最新推荐文章于 2024-10-05 23:10:37 发布

Erike_zhang

最新推荐文章于 2024-10-05 23:10:37 发布

阅读量7.7k

点赞数

分类专栏： express

本文链接：https://blog.csdn.net/Erike_zhang/article/details/43669963

版权

express 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

图片上传：

页面ajax写法

        var data = new FormData();
	　　　var files = $("#idFile")[0].files;
        if(files){
        	data.append("file", files[0]);
	        data.append("CompanyPicAddress","");
	        data.append("CompanyNameCN",$('#CompanyNameCN').textbox("getValue"));
	        data.append("CompanyNameEN",$('#CompanyNameEN').textbox("getValue"));
	    }
        $.ajax({
        	type: 'post',
        	dataType: 'json',
        	url:'...',
        	data : data,
        	contentType: false,
        	processData: false,
        	success : function (data, textStatus){  		
        	},
        	error:function(XMLHttpRequest, textStatus, errorThrown){
        		
        	}
        });

后台存储：

        var fs = require('fs');
	var formidable = require("formidable");
	var form = new formidable.IncomingForm();
	form.uploadDir = global.yjGlobal.config.routeDirs[2].rootDir+"\\client\\companyPic\\";	
	form.parse(sender.req, function(error, fields, files){
	    var fName = (new Date()).getTime();
            var file = files.file<span style="font-family: Arial, Helvetica, sans-serif;">; //只上传一张图片          </span>

            switch (file.type){
                case "image/jpeg":
                    fName = fName + ".jpg";
                    break;
                case "image/png":
                    fName = fName + ".png";
                    break;
                default :
                    fName =fName + ".png";
                    break;
            }                       
            var uploadDir = "\\client\\companyPic\\" + fName; 
            sender.req.query=fields;
            sender.req.query.CompanyPicAddress="\\companyPic\\" + fName;          
             try{
		fs.renameSync(file.path, uploadDir);
		}catch(e){
	         console.log(e);
            }
        });

需要注意的是from.uploadDir和uploadDir地址的赋值

1.保证目录一定存在。如果form.uploadDir不赋值，它默认的位置是C:\User\用户名\AppData\Local\Temp，一般都是将文件存储到指定位置，故这个地址是要改的

2.目录一致。rom.uploadDir和uploadDir目录一致。

页面实现：

$("#preview")[0].src=“...”//通过URL,根据自己情况直接读取地址