在使用Angular/Node JS上传文件后,如何使API返回JSON文本?

发布于 2025-01-27 17:33:47 字数 2330 浏览 1 评论 0原文

我的目标是创建一个文件选择接口,以便使用Angular CLI和Node JS上传文件。
我构建了一个带有节点JS的API,该API必须检查文件的类型(仅CSV文件),然后返回JSON文本,说明上传是成功还是失败。我决定尝试使用Multer(请参阅 https://www.npmjs.coms.coms.coms.coms.coms.coms.coms.coms.com/package/package/multer/multer/multer )。
一切都在起作用,我的CSV上载了。但是在用户上传他的文件后,我无法从API中获取JSON消息。

这是我创建的文件:

html part

  <div class="file-upload">
    <input type="file"  name="file" ng2FileSelect [uploader]="uploader" accept="text/csv" />
    <button type="button" class="btn btn-primary btn-sm" (click)="uploader.uploadAll()" [disabled]="!uploader.getNotUploadedItems().length">
      RUN
    </button>
  </div>

part part

const URL = 'https://xxxxx.com:xxxx/upload';
export class SelectFileComponent implements OnInit {
  public uploader: FileUploader = new FileUploader({
    url: URL,
    itemAlias: 'fileToUpload',
  });
  constructor() { }

  ngOnInit() {
    this.uploader.onAfterAddingFile = (file) => {
      file.withCredentials = false;
    };
    this.uploader.onCompleteItem = (item: any, status: any) => {
    };
  }

节点js part

// File upload settings  
const PATH = './uploads';
let storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, PATH);
  },
  filename: (req, file, cb) => {
    cb(null, file.originalname)
  }
});


let upload = multer({
  storage: storage,
  fileFilter: (req, file, cb) => {
    if (file.mimetype == 'application/vnd.ms-excel'){
      cb(null, true);
    } else {
      cb(null, false);
      return cb('Only csv format allowed!');
    }
  }
});

// Post file
   app.post('/upload', upload.single('fileToUpload'), async (req, res) => {
  // I would like to do :
  // if file has not csv extension...
     {
     return res.json({
     success: false,
     message: "Bad format, please select a CSV file",
      });
  } 
  // else if everything is ok... 
    {
     return res.json({
     success: true,
     message: "Some success message"
     });
  }
  else {}
});

看来我似乎无法使用中创建的变量“文件上传设置” “ post file” part。
您有什么想法可以帮助我实施该JSON消息吗?

My goal is to create a File Select interface in order to upload files on a server using Angular CLI and Node JS.
I built an API with Node JS that must check the type of the file (only CSV files) and then return a JSON text saying whether the upload succeeds or fails. I decided to give it a try with Multer (see https://www.npmjs.com/package/multer).
Everything is working and my CSV is well uploaded. But I don't manage to get the JSON message from the API after a user uploads his file.

Here is the files I created :

HTML PART

  <div class="file-upload">
    <input type="file"  name="file" ng2FileSelect [uploader]="uploader" accept="text/csv" />
    <button type="button" class="btn btn-primary btn-sm" (click)="uploader.uploadAll()" [disabled]="!uploader.getNotUploadedItems().length">
      RUN
    </button>
  </div>

TS PART

const URL = 'https://xxxxx.com:xxxx/upload';
export class SelectFileComponent implements OnInit {
  public uploader: FileUploader = new FileUploader({
    url: URL,
    itemAlias: 'fileToUpload',
  });
  constructor() { }

  ngOnInit() {
    this.uploader.onAfterAddingFile = (file) => {
      file.withCredentials = false;
    };
    this.uploader.onCompleteItem = (item: any, status: any) => {
    };
  }

NODE JS PART

// File upload settings  
const PATH = './uploads';
let storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, PATH);
  },
  filename: (req, file, cb) => {
    cb(null, file.originalname)
  }
});


let upload = multer({
  storage: storage,
  fileFilter: (req, file, cb) => {
    if (file.mimetype == 'application/vnd.ms-excel'){
      cb(null, true);
    } else {
      cb(null, false);
      return cb('Only csv format allowed!');
    }
  }
});

// Post file
   app.post('/upload', upload.single('fileToUpload'), async (req, res) => {
  // I would like to do :
  // if file has not csv extension...
     {
     return res.json({
     success: false,
     message: "Bad format, please select a CSV file",
      });
  } 
  // else if everything is ok... 
    {
     return res.json({
     success: true,
     message: "Some success message"
     });
  }
  else {}
});

It seems I can't use a variable created in the "File upload settings" into the "Post file" part.
Have you any ideas to help me to implement that JSON message ?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文