web-dev-qa-db-fra.com

télécharger un fichier et un formulaire de données dans les API Web et angularJS

Je suis un guide dans ce blog sur la façon de publier des données de formulaire et un fichier J'essaye de télécharger le fichier dans un répertoire sur le serveur Ai fini de suivre mais cela ne fonctionne pas.

c'est la fonction Post 

[HttpPost]
        public async Task<HttpResponseMessage> UploadFile(HttpRequestMessage request)
        {
            String root = HttpContext.Current.Server.MapPath("~/Logo/");

            if (!request.Content.IsMimeMultipartContent())
            {
                throw new HttpResponseException(HttpStatusCode.UnsupportedMediaType);
            }

            var data = await Request.Content.ParseMultipartAsync();
            var httpRequest = HttpContext.Current.Request;

            if (data.Files.ContainsKey("file"))
            {

                var file = data.Files["file"].File;      // this is getting the file
                var fileName = data.Files["file"].Filename; // this is getting the fileName
               // System.Web.HttpPostedFile filePost = data.Files["file"];
                String a = root + "" + Path.GetFileName(fileName);
                string b = a;
                var postedFile = fileName;                                                  // this is not working
                var filePath = HttpContext.Current.Server.MapPath("~/Logo/" + fileName);    // can someone help please 
                postedFile.SaveAs(filePath);                                                // I

            }

            if (data.Fields.ContainsKey("description"))
            {
                var description = data.Fields["description"].Value;
            }

            return new HttpResponseMessage(HttpStatusCode.OK)
            {
                Content = new StringContent("Thank you for uploading the file...")
            };
        }

comment puis-je sauvegarder le fichier dans le répertoire sur le serveur?

c#asp.netangularjsasp.net-web-api2
8
LL Janneh

j'utilise actuellement le code suivant pour télécharger des fichiers image, mais cela fonctionne également pour tout type de fichier:

public string UploadImage()
    {
        HttpRequestMessage request = this.Request;
        if (!request.Content.IsMimeMultipartContent())
        {
            throw new HttpResponseException(new HttpResponseMessage((HttpStatusCode.UnsupportedMediaType)));
        }
        var context = HttpContext.Current.Request;
        if (context.Files.Count > 0)
        {
            var resourcePhoto = new PhotoHelper(HttpContext.Current.Server.MapPath("~"));
            var file = context.Files.AllKeys.FirstOrDefault();
            var result = resourcePhoto.SaveResourceImage(context.Files[file], User.Identity.Name);
            return result;
        }
        else
        {
            return null;
        }
    }

Et dans la SaveResourceImage je fais ce qui suit:

 postedFile.SaveAs(resultPath);

C'est ça.

7
Ihor Korotenko

Un service 

app.factory('myService', ['$http', function ($http) {
    return {
        uploadFile: function(url, file) {
            return $http({
                url: url,
                method: 'POST',
                data: file,
                headers: { 'Content-Type': undefined }, //this is important
                transformRequest: angular.identity //also important
            });
        },
        otherFunctionHere: function(url, stuff) {
            return $http.get(url);
        }
    };
}]);

Manette 

app.controller('MainCtrl', ['$scope', 'myService', function($scope, myService) {

    $scope.uploadFile = function() {
        var fileInput = document.getElementById('fileInput');
        fileInput.click();

        //do nothing if there's no files
        if(fileInput.files.length === 0) return;

        var file = fileInput.files[0];

        var payload = new FormData();
        payload.append("stuff", "some string");
        payload.append("file", file);

        //use the service to upload the file
        myService.uploadFile('/path/to/API', payload).then(function(response){
            //success, file uploaded
        }).catch(function(response){
            //bummer
        });
    }

}]);

Contrôleur C # 

[HttpPost]
public JsonResult UploadFile(string stuff, HttpPostedFileBase file)
{
    string fileName = Path.GetFileNameWithoutExtension(file.FileName);
    string extension = Path.GetExtension(file.FileName);

    //save the file
    try
    {
        file.SaveAs('somePath' + fileName + extension);
    }
    catch (IOException exc)
    {
        return Json(new { status = 'error', message = exc.Message });
    }

    return Json('horray');
}
5
Kyle

J'ai essayé de cette façon sur Angular 1.5. J'ai donc un contrôleur et un référentiel en amont. Je ne l'ai pas sauvegardé sur le lecteur local. Mais il existe un tampon que nous pouvons économiser où nous voulons.

Manette: 

function submit() {

        modelTemplateRepository.add(model.modelTemplate, model.file)
            .then(function(response) {
                if (response && response.status) {
                    if (response.status === 422) {
                        model.apiError = response.data;
                        model.isSubmitting = false;
                    }
                    else {
                        onSaved(response.data);
                    }
                }
            });
    }

Repository: 

function add(modelTemplate, file) {

        var fd = new FormData();

        fd.append('file', file);
        fd.append('modelTemplate',angular.toJson(modelTemplate));

        return $http.post(config.ApiEndpoint + '/modeltemplate', fd,
        {
            transformRequest: angular.identity,
            headers: {'Content-Type': undefined}
        })
            .then(addComplete)
            .catch(function(data) {
                return angular.fromJson(data);
            });

        function addComplete(response, status, headers, config) {
            return response;
        }
    }

API: 

[HttpPost]
    [Route("api/modeltemplate")]
    public async Task<IHttpActionResult> Post()
    {

        if (!Request.Content.IsMimeMultipartContent())
            throw new HttpResponseException(HttpStatusCode.UnsupportedMediaType);

        var provider = new MultipartMemoryStreamProvider();

        await Request.Content.ReadAsMultipartAsync(provider);

        var file = provider.Contents.First(x => x.Headers.ContentDisposition.Name == "\"file\"");

        var filename = "";
        var buffer = new byte[0];

        if (file.Headers.ContentDisposition.FileName != null)
        {
            filename = file.Headers.ContentDisposition.FileName.Trim('\"');
            buffer = await file.ReadAsByteArrayAsync();
        }

        var formContent = provider.Contents.First(x => x.Headers.ContentDisposition.Name == "\"modelTemplate\"");
        Task<string> stringContentsTask = formContent.ReadAsStringAsync();
        var stringContents = stringContentsTask.Result;
        var dto = Newtonsoft.Json.JsonConvert.DeserializeObject<dynamic>(stringContents);

        var result = ApiHelper.Add<dynamic>("modeltemplate", dto);

        return Ok(result);
    }
0
Hasan Khan

J'ai pu ajuster le code avec cet extrait et cela fait l'affaire

 var httpPostedFile = HttpContext.Current.Request.Files["file"];                                                 // this is not working
                var filePath = HttpContext.Current.Server.MapPath("~/Logo/" + fileName);    // can someone help please 
                httpPostedFile.SaveAs(filePath);
0
LL Janneh