通过文件上传传递 URL 或 JSON 对象答案

【问题标题】：Passing URL or JSON Object with File Upload通过文件上传传递 URL 或 JSON 对象
【发布时间】：2024-09-29 02:55:01
【问题描述】：

我有一个正常工作的文件上传，但是，我想传递一个 JSON 对象，其中包含其他详细信息，例如文件的创建者、文件显示名称和要上传的文件路径。每种文件类型都需要上传到我从数据库中获取的某个位置。目前我的文件上传会将所有文件上传到一个位置。如果这是不可能的，我可以只在标题中传递上传路径 URL 吗？

HTML

       <input name="file" type="file"  (change)="onChange($event)" style="width:80%" [disabled]='showDeleteButton' />

组件

 onChange(event: any) {
        var files = event.srcElement.files;
        this.file = files[0];
        this.fileName = this.file.name;
        console.log('file name ' + this.fileName);
        this._uploadService.makeFileRequest(this.baseURL + 'UploadFiles', [], files).subscribe(() => {
            console.log('file name ' + this.fileName);

        });

服务

    makeFileRequest(url: string, params: string[], files: File[]): Observable<any> {
        return Observable.create((observer: Observer<number>) => {
            let formData: FormData = new FormData(),
                xhr: XMLHttpRequest = new XMLHttpRequest();

            for (let i = 0; i < files.length; i++) {
                formData.append("uploads[]", files[i], files[i].name);

            }
            xhr.onreadystatechange = () => {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        observer.next(JSON.parse(xhr.response));
                        observer.complete();
                    } else {
                        observer.error(xhr.response);
                    }
                }
            };

            xhr.open('POST', url, true);
            xhr.send(formData);
        });
    }

WebAPI

[HttpPost]
    [Route("API/FileUpload/UploadFiles")]
    public HttpResponseMessage UploadFiles()
    {
        var file = HttpContext.Current.Request.Files[0];


        if (file.ContentLength > 0)
        {
            var fileName = Path.GetFileName(file.FileName);
            var path = Path.Combine(System.Web.Hosting.HostingEnvironment.MapPath("~/upload/"), fileName);
         //   var path = Path.Combine(System.Web.Hosting.HostingEnvironment.MapPath("~/upload/1/1/"), fileName);
            file.SaveAs(path);
            var content = JsonConvert.SerializeObject(fileName, new JsonSerializerSettings
            {
                ContractResolver = new CamelCasePropertyNamesContractResolver()
            });

            var response = Request.CreateResponse(HttpStatusCode.OK);
            response.Content = new StringContent(content, Encoding.UTF8, "application/json");
            return response;
        }
        return Request.CreateErrorResponse(HttpStatusCode.BadRequest, "faild");
    }

我想传递这个对象

或者是否有办法在标头中传递上传路径？

【问题讨论】：

标签： angular asp.net-web-api asp.net-web-api2

【解决方案1】：

将您的 JSON 数据添加到您在服务方法中构建的表单数据中，并在 Web API 中访问它。

formData.append("uploads[]", files[i], files[i].name);

formData.append("fileInfo" <your JsonData>);

WebAPI method that takes a file upload and additional arguments

【讨论】：