如何使用angular2在本地文件夹中保存图像

时间：2017-04-26 04:40:01

标签： node.js angular

我是堆叠溢出和angular2的新手。我目前正在学习如何使用angular2在应用程序内的本地文件夹中上传图像。我无法理解如何在本地文件夹中保存图像。我已经从堆栈溢出中读取了很多答案但是所有这些（几乎）都使用angularjs而不是angular2。任何人都可以帮我如何使用angular2和nodejs上传和保存本地文件夹中的图像。我只有HTML代码。

<div class="form-group">
<label for="single">single</label>
<input type="file" class="form-control" name="single"  
 /></div>
我度过了整个晚上，但一切都是徒劳的。有人请给我简单的教程，只显示如何使用angular 2

保存在本地文件夹中

1 个答案:

答案 0 :(得分：0)

我创建了这个非常详细的示例，使用 Item 模型，组件，服务，路由和控制器来选择，上传和存储使用最新版本的Angular和NodeJS（目前是Angular 6和NodeJS）的图片8.11）但也应该在以前的版本中工作。

我不会解释太多，考虑到你可以通过检查代码来学习和理解大部分内容。但是，不要犹豫，问你是否自己不了解某些事情。我们走了......

<强> item.component.ts ：

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, FormArray, Validators } from '@angular/forms';
import { ActivatedRoute, ParamMap } from '@angular/router';
import { Subscription } from 'rxjs';
import { mimeType } from './mime-type.validator';

import { ItemService} from '../item.service';

import { Item } from '../item.model';

@Component({
  selector: 'app-item',
  templateUrl: './item.component.html',
  styleUrls: ['./item.component.css']
})
export class ItemComponent implements OnInit {
  item: Item;

  form: FormGroup;

  imagePreview: string;
  private id: string;

  loading = false;

  constructor(public itemService: ItemService, public route: ActivatedRoute) { }

  initForm() {
    this.imagePreview = item.imagePath;

    const item = this.item ? this.item : new Item();

    return new FormGroup({
      id: new FormControl({value: item.id, disabled: true}),
      name: new FormControl(item.name, { validators: [Validators.required, Validators.minLength(3)] }),
      image: new FormControl(item.imagePath, { validators: [Validators.required], asyncValidators: [mimeType] })
    });
  }

  ngOnInit() {
    this.form = this.initForm();

    this.route.paramMap.subscribe((paramMap: ParamMap) => {
      if (paramMap.has('id')) {
        this.id = paramMap.get('id');
        this.loading = true;

        this.itemService.getItem(this.id).subscribe(data => {
          this.item = new Item(
             data._id,
             data.name ? data.name : '',
             data.imagePath ? data.imagePath : '',
          );

          this.form = this.initForm();

          this.loading = false;
        });
      } else {
        this.id = null;
        this.item = this.form.value;
      }
    });
  }

  onImagePicked(event: Event) {
    const file = (event.target as HTMLInputElement).files[0];
    this.form.patchValue({ image: file });
    this.form.get('image').updateValueAndValidity();
    const reader = new FileReader();
    reader.onload = () => {
      this.imagePreview = reader.result;
    };
    reader.readAsDataURL(file);
  }

  onSave() {
    if (this.form.invalid) {
      return;
    }
    this.loading = true;
    if (!this.id) { // creating item...
      const item: Item = {
        id: null,
        name: this.form.value.name,
        imagePath: null
      };
      this.itemService.createItem(item, this.form.value.image);

    } else {  // updating item...
      const item: Item = {
        id: this.id,
        name: this.form.value.name,
        imagePath: null
      };
      this.itemService.updateItem(item, this.form.value.image);
    }

    this.form.reset();
  }

}

mimeType是一个验证器，用于限制用户仅从一组图像类型中选择/加载图像文件......

<强> mimetype.validator ：

import { AbstractControl } from '@angular/forms';
import { Observable, Observer, of } from 'rxjs';

export const mimeType = (control: AbstractControl): Promise<{[ key: string ]: any}> | Observable<{[ key: string ]: any}> => {
  if (typeof(control.value) === 'string') {
    return of(null);
  }
  const file = control.value as File;
  const fileReader = new FileReader();
  const frObs = Observable.create((observer: Observer<{[ key: string ]: any}>) => {
    fileReader.addEventListener('loadend', () => {
      const arr = new Uint8Array(fileReader.result).subarray(0, 4);
      let header = '';
      let isValid = false;
      for (let i = 0; i < arr.length; i++) {
        header += arr[i].toString(16);
      }
      switch (header) {
        case '89504e47':
          isValid = true;
          break;
        case '89504e47':    // png
        case '47494638':    // gif
        case 'ffd8ffe0':    // JPEG IMAGE (Extensions: JFIF, JPE, JPEG, JPG)
        case 'ffd8ffe1':    // jpg: Digital camera JPG using Exchangeable Image File Format (EXIF)
        case 'ffd8ffe2':    // jpg: CANNON EOS JPEG FILE
        case 'ffd8ffe3':    // jpg: SAMSUNG D500 JPEG FILE
        case 'ffd8ffe8':    // jpg: Still Picture Interchange File Format (SPIFF)
          isValid = true;
          break;
        default:
          isValid = false;
          break;
      }
      if (isValid) {
        observer.next(null);
      } else {
        observer.next({ invalidMimeType: true });
      }
      observer.complete();
    });
    fileReader.readAsArrayBuffer(file);
  });
  return frObs;
};

<强> item.component.html ：

＆＃13;
＆＃13; 
<form [formGroup]="form" (submit)="onSave()" *ngIf="!loading">
  <input type="text" formControlName="name" placeholder="Name" autofocus>
  <span class="error" *ngIf="form.get('name').invalid">Name is required.</span>

  <!-- IMAGE BLOCK -->
  <div class="image">
    <button class="pick-image" type="button" (click)="filePicker.click()">
      Pick Image
    </button>
    <input type="file" #filePicker (change)="onImagePicked($event)">
    
    <div class="image-preview" *ngIf="imagePreview !== '' && imagePreview && form.get('image').valid">
      <img [src]="imagePreview" [alt]="form.value.title">
    </div>
  </div>

  <div id="buttons-bar">
    <button class="submit" type="submit">SAVE</button>
  </div>
</form>
＆＃13;
＆＃13;
＆＃13;

使用一些CSS隐藏输入类型＆＃34; file＆＃34; HTML元素，因为它看起来很丑，但仍然需要触发用户浏览器打开一个对话框窗口来选择要上传的文件（显示一个漂亮的按钮以获得更好的用户体验）......

<强> item.component.css

＆＃13;
＆＃13; 
.pick-image {
  padding: 10px;
  background-color: rgba(150, 220, 255, 0.7);
  width: 100px;
}
.pick-image:hover {
  cursor: pointer;
  background-color: rgba(150, 220, 255, 0.9);
}

input[type="file"] {
  visibility: hidden;
  display: none;
}

.image-preview {
  height: 200px;
  margin: 0;
  padding: 0;
}
.image-preview img {
  height: 100%;
  width: 100%;
  object-fit: contain;
}
＆＃13;
＆＃13;
＆＃13;

item.service.ts ：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Router } from '@angular/router';

import { Subject } from 'rxjs';
import { map } from 'rxjs/operators';

import { environment } from '../../environments/environment';
import { Item } from './item.model';

const SERVER_URL = environment.API_URL + '/items/';

@Injectable({ providedIn: 'root' })
export class ItemService {
  private items: Item[] = [];
  private itemsUpdated = new Subject<{items: Item[], count: number}>();

  constructor(private http: HttpClient, private router: Router) {}

  getItems(perPage: number, currentPage: number) {
    const queryParams = `?ps=${perPage}&pg=${currentPage}`;

    this.http.get<{message: string, items: any, total: number}>(SERVER_URL + queryParams)
      .pipe(map((itemData) => {
        return {
          items: Item.extractAll(itemData.items),
          count: itemData.total
        };
      }))
      .subscribe((mappedData) => {
        if (mappedData !== undefined) {
          this.items = mappedData.items;
          this.itemsUpdated.next({
            items: [...this.items],
            count: mappedData.count
          });
        }
      }, error => {
        this.itemsUpdated.next({items: [], count: 0});
      });
  }

  getItemUpdatedListener() {
    return this.ItemsUpdated.asObservable();
  }

  getItem(id: string) {
     return this.http.get<{
        _id: string,
        name: string,
        imagePath: string
     }>(SERVER_URL + id);
  }

  createItem(itemToCreate: Item, image: File) {
    const itemData = new FormData();
    itemData.append('name', itemToCreate.name);
    itemData.append('image', image, itemToCreate.name);

    this.http.post<{ message: string, item: Item}>(SERVER_URL, itemData ).subscribe((response) => {
      this.router.navigate(['/']);
    });
  }

  updateItem(itemToUpdate: Item, image: File | string) {
    let itemData: Item | FormData;
    if (typeof(image) === 'object') {
      itemData = new FormData();
      itemData.append('id', itemToUpdate.id);
      itemData.append('name', itemToUpdate.name);
      itemData.append('image', image, itemToUpdate.name);
    } else {
      itemData = {
        id: itemToUpdate.id,
        name: itemToUpdate.name,
        imagePath: image
      };
    }

    this.http.put(SERVER_URL + itemToUpdate.id, itemData).subscribe(
      (response) => {
        this.router.navigate(['/']);
      }
    );
  }

  deleteItem(itemId) {
    return this.http.delete<{ message: string }>(SERVER_URL + itemId);
  }

}

现在，在后端（使用ExpressJS的NodeJS）中，您可以看到app.js，其中包括您按照以下顺序引用与数据库（此处使用MongoDB）和中间件的连接...

<强> app.js ：

const path = require('path');
const express = require('express');
const bodyParser = require('body-parser');
const mongoose = require('mongoose');

const itemRoutes = require('./routes/items');

const app = express();

mongoose.connect(
    'mongodb+srv://username:' +
    process.env.MONGO_ATLAS_PW +
    '@cluster0-tmykc.mongodb.net/database-name', { useNewUrlParser: true })
  .then(() => {
    console.log('Mongoose is connected.');
  })
  .catch(() => {
    console.log('Connection failed!');
  });

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));

app.use('/images', express.static(path.join(__dirname, 'images')));
app.use('/', express.static(path.join(__dirname, 'angular')));

app.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept, Authorization');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PATCH, PUT, DELETE, OPTIONS');
  next();
});

app.use('/api/items', itemRoutes);

app.use((req, res, next) => {
  res.sendFile(path.join(__dirname, 'angular', 'index.html'));
});

module.exports = app;

您的itemRoutes items.js文件位于routes文件夹中......

<强>路由/ items.js ：

const express = require('express');
const extractFile = require('./../middleware/file');
const router = express.Router();

const ItemController = require('./../controllers/items');

router.get('', ItemController.get_all);

router.get('/:id', ItemController.get_one);

router.post('', extractFile, ItemController.create);

router.put('/:id', extractFile, ItemController.update);

router.delete('/:id', ItemController.delete);

module.exports = router;

items.js文件夹中的ItemController controllers文件...

<强>控制器/ items.js 

const Item = require('./../models/item');

// ...

exports.create = (req, res, next) => {
  const url = req.protocol + '://' + req.get('host');

  const item = req.body; // item = item to create

  const itemToCreate = new Item({
    name:         item.name,
    imagePath:    url + "/images/" + req.file.filename,
  });

  itemToCreate.save().then((newItem) => {
    res.status(201).json({
      message: 'Item created.',
      item: {
        ...newItem,
        id: newItem._id
      }
    });
  })
  .catch(error => {
    console.log('Error while creating item: ', error);
    res.status(500).json({
      message: 'Creating item failed!',
      error: error
    });
  });
};

// ...

最后， file.js 中间件：

const multer = require('multer');

const MIME_TYPE_MAP = {
  'image/png': 'png',
  'image/jpeg': 'jpg',
  'image/jpg': 'jpg'
};

const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    const isValid = MIME_TYPE_MAP[file.mimetype];
    let error = isValid ? null : new Error('Invalid mime type');
    cb(error, 'backend/images'); // USE THIS WHEN APP IS ON LOCALHOST
    // cb(error, 'images'); // USE THIS WHEN APP IS ON A SERVER
  },
  filename: (req, file, cb) => {
    const name = file.originalname.toLowerCase().split(' ').join('-');

    const ext = MIME_TYPE_MAP[file.mimetype];
    cb(null, name + '-' + Date.now() + '.' + ext);
  }
});

module.exports = multer({storage: storage}).single('image');

我简化了我的应用程序部分，以适应这个例子，使其更容易理解（同时在那里留下很多东西来帮助完成＆＃34;圈＆＃34;）。我希望这有帮助。

相关问题
最新问题