如何使用nodejs上传图片/文件

来源:互联网 发布:吸毒人群数据 编辑:程序博客网 时间:2024/05/22 21:09

你可以认真看一下,你会发现并没有想象的那么复杂。

这里的前台控件用到了蚂蚁金服的,上面有很详细的API,这是一个很不错的网址,值得推荐:https://ant.design/docs/react/introduce-cn

1、下面是前台代码:

import React from 'react';import { Upload, message, Button, Icon } from 'antd';const fileList = []; //上来装载上传图片或文件的数据const props = {    action: '//localhost:8088/request/zp',  //这是你要跳转到后台的地址    listType: 'picture',//这个是控件的属性,你可以不看它,也可以上蚂蚁金服上面看    defaultFileList: [...fileList],};export default class UploadImage extends React.Component {    render() {        return (            <div>                <Upload {...props}>                    <Button><Icon type="upload" /> 添加</Button>                </Upload>            </div>        );    }}

2、第二步,跳转之后到达后台的server.js

//在server.js里面加上这两句,用于跳转

var request = require('./routes/request');app.use('/request', request);

3、第三步,操作写入图片或文件

var express = require('express');var router = express.Router();var fs = require('fs');var path = require('path')var multiparty = require('multiparty');  //解析器router.post('/readImage', function (req, res) {    console.log("进入readImage");    // 解析一个文件上传    var form = new multiparty.Form();    form.parse(req, function (err, fields, files) {        //同步重命名文件名        fs.rename(files.file[0].path, path.resolve('写入图片的路径'+'图片或文件的名字,可以在files中取出来'));        res.write('received upload:\n\n');        res.end();    });})module.exports = router;

到这里我们就大功告成了,祝你好运!





原创粉丝点击