浅谈node实现图片上传的方法


当前第2页 返回上一页

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

const http=require('http');

const formidable=require('formidable');

 

var server=http.createServer(function(req,res){

    // 后端设置跨域

    res.setHeader('Access-Control-Allow-Origin','*');

    res.setHeader('Access-Control-Allow-Headers','Content-Type');

    res.setHeader('Content-Type','application/json');

     

    switch(req.method){

        case 'OPTIONS':

            res.statusCode=200;

            res.end();

            break;

        case 'POST':

            upload(req,res);

            break;

    }

})

 

function upload(req,res){

    if(!isFormData(req)){

        res.statusCode=400;

        res.end('请求错误,请使用multipart/form-data格式');

        return;

    }

     

    var form=new formidable.IncomingForm();

    // 设置上传图片保存文件

    form.uploadDir='./myImage';

    form.keepExtensions=true;

     

    form.on('field',(field,value)=>{

        console.log(field);

        console.log(value);

    })

    form.on('end',()=>{

        res.end('上传完成!');

    })

    form.parse(req);

}

 

function isFormData(req){

    let type=req.headers['content-type'] || '';

    return type.includes('multipart/form-data');

}

 

server.listen(8081,function(){

    console.log('port is on 8081');

})

6、7、8三行setHeader尤其重要,这是后端跨域的精髓!

添加上传进度

这个也是我们常用的,并且所希望看到的!这会给用户极好的体验感。
我们只要在上面代码中添加:

1

2

3

4

form.on('progress',(bytesReceived,bytesExpected)=>{

    var precent=Math.floor(bytesReceived/bytesExpected*100);

    console.log(precent);

})

然后把这个进度传回到用户的浏览器中去,即可。

formidable

formidable模块实现了上传和编码图片和视频。它支持GB级上传数据处理,支持多种客户端数据提交。有极高的测试覆盖率,非常适合在生产环境中使用。
formidable模块的方法和属性 ―― 围绕:Formidable.incomingForm()

可以通过该方法创建一个form表单:

1

var form = new formidable.IncomingForm();

通过encoding属性设置字段编码

1

form.encoding='utf-8';

通过uploadDir设置上传文件时临时文件存放的位置,默认上传的临时文件存放的位置为os.tmpDir();

1

form.uploadDir='/tmp/';

通过keepExtensions属性可以设置文件上传时临时文件的文件名是否包括扩展名。如果该值为真,即为包括扩展名,否则,就不包括扩展名。

1

form.keepExtensions=false

还有比较重要的“ parse方法 ”:解析node.js中request请求中包含的form表单提交的数据。cb为处理请求的回调函数(不必须)。

1

2

3

form.parse(req,function(err,fields,files){

    //...

});

更多编程相关知识,请访问:编程视频!!

以上就是浅谈node实现图片上传的方法的详细内容,更多文章请关注木庄网络博客

返回前面的内容

相关阅读 >>

Node.js中stream-可读流的使用

浅谈Node中文乱码的解决方法

Node卸载命令是什么

h5完成多图片上传的实例详解

Node.js怎么卸载?

Node+udp实现图片裁剪功能

一文快速了解Nodejs中crypto模块的用法

总结Nodejs开发中常用的一些模块

介绍html5+canvas调用手机拍照功能实现图片上传(下篇)

Node sass是干嘛的

更多相关阅读请进入《Node》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...