图片上传后端express模拟图片裁切

vue部分

在dom树创建hidden的input 模拟点击事件调用input选取图片并创建formData上传图片




        

        

express部分

利用gm裁剪图片

app.post('/upload', (req, res) => {

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

    res.setHeader('Access-Control-Allow-Method', 'OPTIONS, POST');

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

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

    // parse a file upload

    var form = new formidable.IncomingForm();

    // 配置上传文件夹

    form.uploadDir = __dirname + /uploads;

    // 保留扩展名

    form.keepExtensions = true;

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

        res.json({

            'ok': true,

            'filename': path.parse(files.tupian.path).base

        });

    });

});

你可能感兴趣的:(图片上传后端express模拟图片裁切)