Как удалить изображение из серверной части, когда пользователь заменяет это изображение новым?

Надеюсь, объяснение не очень запутанное. Я работаю со MEAN STACK, в моем веб-приложении есть компонент, который позволяет мне редактировать пользовательские данные, в такие данные пользователь может загрузить изображение профиля.

Когда пользователь новый, у него, очевидно, нет изображения, когда пользователь впервые загружает свое изображение, это изображение сохраняется в папке моего бэкэнда, называемой users , когда у пользователя уже есть изображение и Он хочет обновить, что происходит, когда новое изображение сохраняется в папке users , и старое изображение также остается там.

Я хотел бы, чтобы старое изображение было заменено или удалено, когда пользователь обновляет изображение. Я надеюсь, что вы можете поделиться идеями или примерами.

КОНТРОЛЛЕРЫ:

'use strict'

var Usuarios = require('../dao/usuarios');
const jwt = require('jsonwebtoken');
const bcrypt = require('bcryptjs');
const SECRET_KEY = 'secretkey123456';
var fs = require('fs');
var path = require('path');


var controller = {

    // METODO PARA REGISTRAR USUARIO
    RegistroUsuarios: function(req, res) {
      
      const newUser = {
        name: req.body.name,
        nickname: req.body.nickname,
        email: req.body.email,
        password: bcrypt.hashSync(req.body.password)
      }
    
      Usuarios.create(newUser, (err, user) => {
        
        if(err && err.code === 11000){
          return res.status(409).send({ message: 'Algo anda mal' });
        }

        if(err){
          return res.status(500).send({ message: 'Error del servidor' });
        }

        const expiresIn = 24 * 60 * 60;
        const accessToken = jwt.sign({ id: user.id },
          
          SECRET_KEY, {
            expiresIn: expiresIn
        
        });

        const dataUser = {
          _id: user.id,
          accessToken: accessToken,
          expiresIn: expiresIn

        }

        // response 
        res.send({ dataUser });

      });
    },


    // METODO PARA INICIAR SESIÓN
    loginUser: function(req, res, next){
      
        const userData = {
          email: req.body.email,
          password: req.body.password
        }

        Usuarios.findOne({ email: userData.email }, (err, user) => {

          if (err){

            return res.status(500).send({ message: 'Error del servidor' });

          } 
      
          if (!user){

            //No existe el email
            res.status(409).send({ message: 'Algo anda mal' });

          }else{

            const resultPassword = bcrypt.compareSync(userData.password, user.password);

            if(resultPassword){

              const expiresIn = 24 * 60 * 60;
              const accessToken = jwt.sign({ id: user.id }, SECRET_KEY, { expiresIn: expiresIn });
      
              const dataUser = {

                _id: user.id,
                accessToken: accessToken,
                expiresIn: expiresIn
              }

              // response
              res.send({ dataUser });

            }else{

              //Contraseña incorrecta
              res.status(409).send({ message: 'Algo anda mal' });

            }

          }

        });

    },

    
    // METODO PARA MOSTRAR TODOS LOS USUARIOS REGISTRADOS
    getUsers: function(req, res){

      Usuarios.find({}).sort('name').exec((error, users) =>{
        if(error){
          return res.status(500).send({ message: 'Error al devolver los datos' });
        }
        if(!users){
          return res.status(404).send({ message: 'No hay usuarios para mostrar' });
        }
  
        return res.status(200).send({ users });
      });

    },


    // METODO PARA MOSTRAR UN USUARIO
    getUser: function(req, res){
      var userId = req.params.id;
  
      if(userId == null){
        return res.status(404).send({ message: 'El proyecto no existe' });
      }
  
      Usuarios.findById(userId, (err, user) =>{
  
        if(err){
          return res.status(500).send({ message: 'Error al devolver los datos' });
        }
        if(!user){
          return res.status(404).send({ message: 'El usuario no existe' });
        }
  
        return res.status(200).send({ user });
  
      });
    },


    // METODO PARA ACTUALIZAR USUARIO
    updateUser: function(req, res){
      var userId = req.params.id;
      var update = req.body;
  
      Usuarios.findByIdAndUpdate(userId, update, {new:true}, (error, userUpdate) =>{

          if(error && error.code === 11000){
            return res.status(409).send({ message: 'El correo ya existe' });
          }
          if(error){
          return res.status(500).send({ message: 'Error al actualizar' });
          }
          if(!userUpdate){
            return res.status(404).send({ message: 'No hay proyectos para actualizar' });
          }
  
          return res.status(200).send({ user: userUpdate });
      });
    },
  

    // METODO PARA ELIMINAR USUARIO
    deleteUser: function(req, res){
      var usertId = req.params.id;
      
      Usuarios.findByIdAndDelete(usertId, (error, userDelete) =>{
        if(error){
          return res.status(500).send({ message: 'Error al borrar'  });
        }
        if(!userDelete){
          return res.status(404).send({ message: 'No hay proyectos para borrar' });
        }
  
        return res.status(200).send({ user: userDelete });
      });
    },


    // METODO PARA SUBIR IMAGEN DE PERFIL DEL USUARIO
    uploadImage: function(req, res){
      var userId = req.params.id;
      var fileName = 'Imagen no subida...';
  
      if(req.files){
        var filePath = req.files.image.path;
        var fileSplit = filePath.split('\\');
        var fileName = fileSplit[1];
        var extSplit = fileName.split('\.');
        var fileExt = extSplit[1];
  
        if(fileExt == 'png' || fileExt == 'PNG' || fileExt == 'jpg' || fileExt == 'JPG' || fileExt == 'png' || fileExt == 'jpeg' || fileExt == 'JPEG' || fileExt == 'gif' || fileExt == 'GIF'){
          Usuarios.findByIdAndUpdate(userId, {image: fileName}, {new:true}, (error, userUpdate) =>{
  
            if(error){
              return res.status(500).send({ message: 'La imagen no se ha subido' });
            }
            if(!userUpdate){
              return res.status(404).send({ message: 'No hay proyecto para agregarle imagen' });
            }
  
            return res.status(200).send({ user: userUpdate });

          });

        }else{
          fs.unlink(filePath, (error) =>{
            return res.status(200).send({ message: 'La extension no es valida' });
          });
        }
      }else{
        return res.status(200).send({ message: fileName });
      }
    },

    
    // METODO PARA MOSTRAR LA IMAGEN
    getImageFile: function(req, res){
      var file = req.params.image;
      var path_file = './users/'+file;
  
      fs.exists(path_file, (exists) => {
        if(exists){
          return res.sendFile(path.resolve(path_file));
        }else{
          return res.status(200).send({ message: "No existe la imagen" });
        }
      });
    }

};

//Exportamos el JSON de metodos o funciones para
module.exports = controller;

EDIT.COMPONENT.TS:

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute, Params } from '@angular/router';

import { Usuarios } from '../../models/usuarios';
import { UsuariosService } from '../../service/usuarios.service';
import { Global } from '../../service/global';
import { UploadService } from '../../service/upload.service';

declare var $:any;


@Component({
  selector: 'app-edit',
  templateUrl: './edit.component.html',
  styleUrls: ['./edit.component.css'],
  providers: [UsuariosService, UploadService]
})
export class EditComponent implements OnInit {

	  public user: Usuarios;
  	public fileUpload: Array<File>;
  	public save_user;
    public url: string;
    public mensaje_Error: any;

  constructor(
    private _userService: UsuariosService, 
    private _uploadService: UploadService, 
    private _router: Router, 
    private _route: ActivatedRoute
    ) { 

      this.url = Global.url;

    }

  ngOnInit() {

    this._route.params.subscribe(params => {

      let id = params.id;
      this.getUser(id);

    });

  }


  getUser(id){

    this._userService.getUser(id).subscribe(
      response =>{

        this.user = response.user;

      },
      error =>{

        console.log(<any>error);

      }
    );

  }


  // METODO PARA GUARDAR LOS NUEVOS CAMBIOS
  onSubmit(userForm){

    this._userService.editUser(this.user).subscribe(
      response =>{

        if(response.user){
          if(this.fileUpload){

            this._uploadService.SolicitudArchivo(Global.url+"/image-user/"+response.user._id, [], this.fileUpload, 'image').then((result:any) => {

              this.save_user = result.user;
              this._router.navigateByUrl('/perfil');

            });

          }else{

              this.save_user = response.user;
              this._router.navigateByUrl('/perfil');

          }
        }else{
          // this.status = 'failed';
        }

      },
      error =>{

        console.log(<any>error);
        this.MensajeError();
        this.mensaje_Error = error.error.message;

      }

    );

  }

  // METODO PARA EXTRAER LA IMAGEN DEL TARGET
  ArchivosEvent(fileInput: any){
    this.fileUpload = <Array<File>>fileInput.target.files;
  }


  // METODO QUE SIRVE PARA MOSTRAR UN MENSAJE DE ERROR CUANDO LOS DATOS DE LOGIN NO SEAN CORRECTOS
  MensajeError(){

    setTimeout(function() {
        $("#mensajeError").fadeIn(100); //-> Muestra el mensaje en 300 milisegundos
    },300);
 
    setTimeout(function() {
        $("#mensajeError").fadeOut(3000); //-> Cierra el mensaje despues de los 3 segundos
    },3000);

  }


}

UPLOAD.SERVICE.TS:

import { Injectable } from '@angular/core';
import { Global } from './global';



@Injectable()
export class UploadService{
	public url: string;


	constructor(){
		this.url = Global.url;
	}

	SolicitudArchivo(url: string, params: Array<string>, files: Array<File>, name: string){

		return new Promise(function(resolve, reject){
			var formData:any = new FormData();
			var xhr = new XMLHttpRequest();

			for(var i=0; i<files.length; i++){
				formData.append(name, files[i], files[i].name);
			}

			xhr.onreadystatechange = function(){
				if(xhr.readyState == 4){
					if(xhr.status == 200){
						resolve(JSON.parse(xhr.response));
					}else{
						reject(xhr.response);
					}
				}
			}

			xhr.open('POST', url, true);
			xhr.send(formData);
		});
	}
}
3
задан 29.11.2019, 01:40
2 ответа

В твоем controller ты импортируешь fs (file system)

const fs = require("fs")

Внутри логики:


if (fs.existsSync(pathViejo)) fs.unlinkSync(pathViejo)

DespuГ©s этой линии ты можешь вновь сохранять ее fotografГ - в как ты это делаешь до настоящего времени.

Будь осторожен, которого ты у pathViejo не было специальных символов или места. Это может перевозить тебе проблемы, чтобы находить и удалять фотографию. То, что я обычно делаю, состоит в том, чтобы менять имя фотографии (сохраняя ее extensiГіn) и помещать id пользователя, asГ - он требует меньшего количества работы.


Объяснение

fs.existSync() Подтверждает, действительно существует ли файл, иначе следующая линия дала бы ошибку.

fs.unlinkSync() Удаляет файл, что мы знаем, что он существует.

Обе операции синхронные, чтобы избегать создавать новое обещание или callback внутри controller.

ты Можешь находить больше informaciГіn по этому поводу здесь .

4
ответ дан 01.12.2019, 10:39
  • 1
    Funcionó чуда, большое спасибо. – Carlos Escobar 01.12.2019, 02:11
  • 2
    ú ltima спроси, Чтобы удалять изображение папки users, когда пользователь удален ¿ Это тот же процесс? – Carlos Escobar 01.12.2019, 02:36
  • 3
    Bá sicamente если. Только, что tú ló gica deberí чтобы идти (в мой вкус) в pre remove, чтобы не терять ссылку. – Angel 01.12.2019, 03:26

Ты можешь называть файл, который ты пересылаешь, с id клиента, потом, обрежь проверять существование того же самого, посредством _file_exists_ php.

<?php

    $nombre_fichero = '/path/to/foo.txt';

    if (file_exists($nombre_fichero)) {
      echo "El fichero $nombre_fichero existe";
       rename($nombre_fichero.$idcliente, "/ficheroBK/");
       // subir la nueva imagen
    } else {
      echo "El fichero $nombre_fichero no existe";
    }

    ?>
-1
ответ дан 01.12.2019, 10:39
  • 1
    В ningú n момент упомянул о том, что язык, что está манипулируя он php, следовательно этот ответ не подходящий. – DaxTter77 29.11.2019, 18:48