Публикация и просмотр файлов изображений azure blob с каждым изображением, имеющим идентификатор, соответствующий строке таблицы - PullRequest
1 голос
/ 04 марта 2020

Я хотел бы загрузить изображения с. net core web api 2.1 и jquery в данных поста в azure blob с идентификатором, затем при получении данных изображение также находится в соответствующей строке таблицы (в основном как сообщение в блоге). В настоящее время я загружаю и извлекаю данные в BLOB-объекты * 1012 следующим образом: веб-интерфейс:

[Route("api/[controller]")]
[EnableCors("MyPolicy")]
public class BlobController : Controller
{

    private CloudBlobClient cloudBlobClient;


    public BlobController(CloudBlobClient cloudBlobClient)
    {
        this.cloudBlobClient = cloudBlobClient;

    }

    [HttpPost()]
    public OkObjectResult upload([FromForm] IFormFile file)
    {
        string FileName = file.FileName;
        var blobfile = cloudBlobClient.GetContainerReference("container").GetBlockBlobReference(FileName);

        if (blobfile.Exists())
        {

        }
        else
        {
            var container = cloudBlobClient.GetContainerReference("container");
            var blob = container.GetBlockBlobReference(FileName);

            blob.UploadFromStream(file.OpenReadStream());



        }
        return Ok("uploaded");
    }

    [HttpGet()]

    public OkObjectResult GetAll()
    {

        var bloblist = new ArrayList();

        var container = cloudBlobClient.GetContainerReference("container");
        SharedAccessBlobPolicy ReadOnly = new SharedAccessBlobPolicy()
        {
            SharedAccessExpiryTime = DateTime.UtcNow.AddHours(24),
            Permissions = SharedAccessBlobPermissions.Read
        };

        var sas = container.GetSharedAccessSignature(ReadOnly);

        foreach (var blob in container.ListBlobs())
        {
            bloblist.Add(blob.Uri + sas);
        }
        return Ok(bloblist);
    }

}

html / js для загрузки и просмотра изображений:

 <div align="center">
    <form method="post" action="" enctype="multipart/form-data" id="myform">

        <div>
            <input type="file" id="file" name="file" />
            <input type="button" class="button" value="Upload"
                   id="but_upload">
        </div>
    </form>



    <div>
        <input type="button" id="but_display" value="show all uploaded images">

        <div id="stage">
        </div>

    </div>
</div>
@section Scripts {
    <script type="text/javascript">
    $("#but_upload").click(function () {
                var fd = new FormData();
                var files = $('#file')[0].files[0];
                fd.append('file', files);

                $.ajax({
                    url: 'https://localhost:44331/api/blob/',
                    type: 'post',
                    data: fd,
                    contentType: false,
                    processData: false,
                    success: function (response) {
                        if (response != 0) {
                            alert('file uploaded');
                        }
                        else {
                            alert('file not uploaded');
                        }
                    },
                });
            });

            $("#but_display").click(function () {
                $.ajax({
                    url: 'https://localhost:44331/api/blob/',
                    type: 'get',
                    success: function (response) {
                        $("#stage").empty();
                        response.forEach((url) => {

                            $("#stage").append("<img src='" + url + "' width='200' >");

                        })
                    }
                });

            });

</script>
}

Любая помощь будет принята с благодарностью.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...