将图像上传到 Azure Blob 存储

Question

我在前端使用 Angular 2，在后端使用 Node.js。我正在尝试将文件上传到 Azure 存储 blob 容器，但在尝试将图像发送到 api 时不断收到错误消息。任何帮助将不胜感激。

这是服务器端的错误：

contentType: files.myfile.type,

TypeError: Cannot read property 'type' of undefined

客户端的错误

core.js:1521 ERROR 
HttpErrorResponse {headers: HttpHeaders, status: 0, statusText: "Unknown Error", url: null, ok: false, …}
error
:
ProgressEvent {isTrusted: true, lengthComputable: false, loaded: 0, total: 0, type: "error", …}
headers
:
HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, headers: Map(0)}
message
:
"Http failure response for (unknown url): 0 Unknown Error"
name
:
"HttpErrorResponse"
ok
:
false
status
:
0
statusText
:
"Unknown Error"
url
:
null
__proto__
:
HttpResponseBase

上传.component.ts

    export class UploadComponent implements OnInit {
selectedFile: File = null;

  onFileSelected(event) {
this.selectedFile = <File>event.target.files[0];
  }

  onUpload() {
    const fd = new FormData();
    fd.append('image', this.selectedFile, this.selectedFile.name);
    this.http.post('http://localhost:3000/upload', fd , {
    reportProgress : true,
    observe: 'events'
     }).subscribe( event => {
console.log(event);
    });

  }

  constructor(private http: HttpClient) {}

  ngOnInit() {
  }



}

server.js

app.post('/upload', function(req, res) {
    var form = new formidable.IncomingForm();
    form.parse(req, function(err, fields, files) {
        var options = {
                contentType: files.myfile.type,
                metadata: { fileName: files.myfile.name }
        };
        blobSvc.createBlockBlobFromLocalFile('images', files.myfile.name, files.myfile.path, options, function(error, result, response) {
            if(!error){
            // file uploaded
                res.send('file uploaded!');
            }
        });
    });
});

Answer 1

我看到你传递给服务器的对象文件是空的，所以它会抛出上述错误。

您可以在 chrome 开发人员工具的网络选项卡上检查问题，看看您的文件是否被选中。希望对您有所帮助。