Как отправлять данные JSON и Zip-файл с помощью веб-api?

Question

Я создал угловой проект с функцией экспорта, позволяющий загружать выходные данные как .Zip на локальный компьютер.

Теперь я планирую добавить новую функцию для загрузки zip-файла непосредственно на сервер с помощью веб-API вместо этого, чтобы загрузить на локальный, возможно ли это на угловом? Я собираюсь изменить мою функцию для загрузки на локальный и изменить ее для перехода на внешний сервер (но не работает). Поскольку я новый с угловой.

@floc Обновлено:

Спасибо за руководство, поэтому я создал функции следующим образом:

private function zip($path, $id) 
    { 
     $realPath = realpath($path); 
     $absolute = $realPath.DIRECTORY_SEPARATOR; 
     $ignore = array(realpath($this->exportsPath), $realPath); 

     //delete old zip if it exists 
     if (is_file($absolute.$id.'.zip')) { 
      unlink($absolute.$id.'.zip'); 
     } 

     $zip = new ZipArchive(); 
     $zip->open($absolute.$id.'.zip', ZipArchive::CREATE); 

     $files = new \RecursiveIteratorIterator(new \RecursiveDirectoryIterator($realPath), \RecursiveIteratorIterator::SELF_FIRST); 

     foreach ($files as $file) 
     { 
      $path = $file->getRealPath(); 

      if (! in_array($file->getRealPath(), $ignore)) { 
       if (is_dir($file)) 
       { 
        $zip->addEmptyDir(str_replace($absolute, '', $path));    
       } 
       else if (is_file($file)) 
       { 
        $zip->addFromString(str_replace($absolute, '', $path), file_get_contents($file)); 
       } 
      } 
     } 

     if ($zip->close()) { 
      return $absolute.$id.'.zip'; 
     } 
    } 

вместо сохранения в почтовый файл я хочу, что почтовый файл загрузки, используя веб-интерфейс API в одном нажмите кнопку. Я хочу изменить его, но до сих пор не повезло. :(

Спасибо за любую помощь и предложения.

Answer 1

Это, как вы можете сделать это с Угловым.

1) Объявить новую директиву

Вам нужно будет определить новую директиву свяжите ваш <input type="file" /> с вашим контроллером.

.directive("fileArg", [function() { 
    return { 
     scope: { 
      fileArg: "=" 
     }, 
     link: function (scope, element, attributes) { 
      element.bind("change", function (changeEvent) { 
       scope.$apply(function() { 
        scope.fileArg = changeEvent.target.files[0]; 
       }); 
      }); 
     } 
    } 
}]); 

Теперь в вашем HTML:

<input type="file" file-arg="vm.zipFile" /> 

2) Отправить файл на API

function importFile() { 

    var formData = new FormData(); 
    formData.append("data", $scope.zipFile); 

    var options = { 
     headers: { 
      "Content-Type": undefined 
     } 
    }; 

    this.ohttp.post("yourApiUrl", formData, options).then(r => { 

     if (r.data.Error) { 
      // Do something 
     } 

     // Do something else 

    }); 

} 

3) Считать файл в API

Теперь вам необходимо прочитать отправленный вами файл. Для этого вы будете использовать MultipartFormDataMemoryStreamProvider.

Нравится так.

[Route("yourApiUrl")] 
[HttpPost] 
public async Task<dynamic> ImportZipFileAsync() 
{ 
    try 
    { 
     model = await ReadZipFile(); 
    } 
    catch (Exception e) 
    { 
     return new { Error = true, Message = e.Message }; 
    } 

    return "success"; 
} 

private async Task ReadZipFile() 
{ 
    var provider = new MultipartFormDataMemoryStreamProvider(); 

    await Request.Content.ReadAsMultipartAsync(provider); 

    var file = provider.FileStreams.FirstOrDefault(); 

    if (file.Value != null) 
    { 
     var fileName = file.Key; 
     var fileData = file.Value; 

     if (!fileName.ToLowerInvariant().EndsWith(".zip")) 
     { 
      throw new FileLoadException("Wrong file type"); 
     } 

     var data = new MemoryStream(); 
     fileData.CopyTo(data); 
     var dataBytes = data.ToArray(); 

     // Do whatever you want with your dataBytes 
    } 
    else 
    { 
     throw new ArgumentNullException("file.Value"); 
    } 
}