# uploadPicture

**Repository Path**: tanyueer/uploadPicture

## Basic Information

- **Project Name**: uploadPicture
- **Description**: nodejs图片上传 form-data formidable
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2017-12-26
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

#简单的图片上传

## 使用

1. clone
2. ```
    npm install
    bower install
    npm run dev
    ```

## 前端
1. 使用form-data上传图片
```
<form action="/upload" enctype="multipart/form-data" method="post">
  <input type="file" class="defaultInput" name="upload" multiple="multiple" id="file" onchange="processFiles(this.files)">
  <label for="file" class="beautify" id="fileOutput">请选择图片上传</label> //与input file绑定，修改样式使用
  <input type="submit" value="上传" />
</form>
```
2. 上传以背景图显示图片
使用 FileReader模块
```
function processFiles(files) {
  var file = files[0];
  var output = $('#fileOutput');

  //创建FileReader
  var reader = new FileReader();
  //告诉它在准备好数据之后做什么
  reader.onload = function(e) {
    //使用图像URL来绘制显示图片
    var filetype = file.type;
    if (filetype.indexOf('image') != -1) {
      var img = document.createElement('img');
      $(output).css('background',"url("+e.target.result+")");
      $(output).css('background-repeat',"no-repeat");
      $(output).css('background-size',"100% 100%");
      $(output).css('background-position',"center");
    } else {
      var img = document.createElement('img');
      img.src = './public/images/regular.png';
      img.title = file.name;
      $(output).html($(img));
    }
  };
  //读取图片
  reader.readAsDataURL(file);
}
```

## 使用formidable模块进行接收数据
详细地址：https://github.com/felixge/node-formidable
1. form.on
```
form.on('file', function(field, file) { //上传文件
   console.log(file)// 能打印文件名称图片大小以及临时存储位置
})
```

2. form.end
文件传输结束时使用,此时可以存储文件信息，以及做想要的操作
```
//  名称，大小写入文件
  var obj = {
    filename: files.name,
    filesize: files.size,
    status:'ok'
  }
  var json = JSON.stringify(obj);
  fs.writeFile('app/public/imgInfo/img.json', json, 'utf8', function(err) {
    if (err)
      throw err;
    console.log('写入成功');
    res.redirect('/upload');
    });
```
3. fs.rename
文件只是临时存储在磁盘，需要重新指定位置存储
```
fs.rename(files.path, 'app/public/uploads/'+files.name, function(err) {})
```
4. form.parse(req)
需要接受一下req，否则无法运行