将图像上传到 Azure Blob 存储

Posted 2023-03-28

【中文标题】将图像上传到 Azure Blob 存储

【英文标题】：Image uploading to Azure blob storage

【发布时间】：2018-12-17 23:23:56

【问题描述】：

我在前端使用 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!');
            
        );
    );
);

【问题讨论】：

你能发布文件 JSON 的样子吗

您好，我对使用 JSON 非常陌生。你能指导我如何做到这一点吗？

把console.log(JSON.stringify(files))放在这里

我得到的只是 "isTrusted":true 我把 onFileSelected(event) this.selectedFile = event.target.files[0]; console.log(JSON.stringify(event));

表示文件未通过

【参考方案1】：

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

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

【讨论】：

这里是发送到服务器的 json 文件 "image":"size":85814,"path":"/var/folders/w8/99gp0wl979n6r6wrc6kynjym0000gn/T/upload_7dbf37d7abc878d2ff1e8f4635de7850", "name":"屏幕截图 2018-07-08 凌晨 2.35.04.png","type":"image/png","mtime":"2018-07-10T22:34:34.654Z"

所以这是文件对象？

是的，我成功了。错误出现在 node.js 文件中