基于Express框架的图片压缩上传

var getfile = document.querySelector('#file');  //获取文件中id为file的元素
      var reader  = new FileReader();                 //FileReader对象允许WEB应用程序异步读取存储在用户计算机上的文件
      var img     = new Image();                      //Image功能等价于 document.createElement('img')
      var file    = null;
      var canvas  = document.createElement('canvas');
      var context = canvas.getContext('2d');          //返回一个用于在画布上绘图的环境，目前唯一合法值为“2d”
      var newUrl  = null;

//对input绑定事件监听，当内容改变时触发
      getfile.addEventListener('change', function(event){
          file = event.target.files[0];
          if ( file.type.indexOf("image") == 0 ){
              reader.readAsDataURL(file);
          }
      })；

	  reader.onload = function(e){				  	 //当文件上传完后触发，主要是为了获取源文件的长宽
          img.src = e.target.result;
      };


      img.onload = function(){                        //在图片加载完成后立即发生
          var orgin_width  = this.width;
          var orgin_height = this.height;
          var max_width    = 300;
          var max_height   = 300;
          var target_width = orgin_width;
          var target_height= orgin_height;

          if (orgin_width > max_width || orgin_height > max_height){      //判断图像是否大于限定的最大长宽
              if (orgin_width / orgin_height > max_width / max_height){   //上传图像的宽高比较大，以宽为长轴对高进行拉伸
                  target_width  = max_width;
                  target_height = Math.round(max_width * ( orgin_height / orgin_width )); //round（）方法表示四舍五入取整数
              }
              else {
                  target_width  = Math.round(max_height * ( orgin_width / orgin_height ));    //高宽比较大，以高为长轴，对宽进行缩短
                  target_height = max_height;
              }
          }

          canvas.width  = target_width;
          canvas.height = target_height;
          //如果是png转jpg如果canvas存在透明区域，实际绘制出来会变为黑色，因为canvas默认为rgba(0,0,0,0)
          //在转成jpg的时候变成了rgba(0,0,0,1),解决办法就是在绘制之前为canvas铺上一层白色的底色
          context.fillStyle = "#FFF";
          context.fillRect(0, 0, target_width, target_height);        //绘制已填充矩形
          //context.clearRect(0, 0, target_width, target_height);       //清除画布并设置宽高
          context.drawImage(img, 0, 0, target_width, target_height);  //绘画

          newUrl = canvas.toDataURL('image/jpeg', 0.92);          //base64 格式
          modify_img.style.backgroundImage='url(' + newUrl + ')';
      };

var upload = document.querySelector('#upload');           //为"上传"按钮绑定变量
      var progress = document.querySelector('#progress');       //为进度条绑定变量
      var xhr    = new XMLHttpRequest();                        //定义xhr


      upload.addEventListener('click', uploadFile, false);      //设置按钮点击事件

      function uploadFile(event){
          function dataURLtoFile(dataurl, filename) {           //将我们上面转换的base64格式编码转为文件类型
              var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
                  bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
              while(n--){
                  u8arr[n] = bstr.charCodeAt(n);
              }
              return new File([u8arr], filename, {type:mime});
          }

          var file_img = dataURLtoFile(newUrl, file.name);     //定义文件类型的图片
          var formData = new FormData();                       //定义formdata的处理方法
          formData.append('test-upload', file_img);            //定义处理域以及文件传入
          xhr.onload = uploadSuccess;                          //上载成功的返回函数
          xhr.upload.onprogress = setProgress;                 //处理进度的放回函数
          xhr.open('post', '/upload', true);                   //ajax数据请求方法
          xhr.send(formData);                                  //ajax数据发送方法
      }

      function uploadSuccess(event){
          if(xhr.readyState === 4){
              console.log(xhr.responseText);
          }
      }

      function setProgress(event) {
          if (event.lengthComputable) {
              var complete = Number.parseInt(event.loaded / event.total * 100);
              progress.innerHTML = complete + '%';
          }
      }

...
var file_img = dataURLtoFile(newUrl, file.name);     //定义文件类型的图片
...

var logger = require('morgan');
//...
var upload = require('multer')({ dest: 'uploads/' });	//上传图片保存的文件夹为uploads
var fs = require('fs');
var port = 8000;
//...
var indexRouter = require('./routes/index');

app.use('/users', usersRouter);
//...
app.set('port', port);
app.get('*', (req, res) => {
    res.redirect('index.html');
});

app.post('/upload', upload.single('test-upload'), (req, res) => {
    // 没有附带文件
    if (!req.file) {
        res.json({ ok: false });
        return;
    }

    // 输出文件信息
    console.log('====================================================');
    console.log('fieldname: ' + req.file.fieldname);
    console.log('originalname: ' + req.file.originalname);
    console.log('encoding: ' + req.file.encoding);
    console.log('mimetype: ' + req.file.mimetype);
    console.log('size: ' + (req.file.size / 1024).toFixed(2) + 'KB');
    console.log('destination: ' + req.file.destination);
    console.log('filename: ' + req.file.filename);
    console.log('path: ' + req.file.path);

    // 重命名文件
    let oldPath = path.join(__dirname, req.file.path);
    let newPath = path.join(__dirname, 'uploads/' + req.file.originalname);
    fs.rename(oldPath, newPath, (err) => {
        if (err) {
            res.json({ ok: false });
            console.log(err);
        } else {
            res.json({ ok: true });
        }
    });
});

app.listen(port, () => {
    console.log("[Server] localhost:" + port);
});
//...
module.exports = app;

...
formData.append('test-upload', file); 
...