idFS和AngularJs在dotnet核心中创建CDN服务器

idFS和AngularJs在dotnet核心中创建CDN服务器

本文介绍了如何使用MongoDB GridFS和AngularJs在dotnet核心中创建CDN服务器的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我们想使用MongoDB GridFS和angular js在.net核心中创建一个名为CDN的解耦文件服务器。

We want to create a decoupled file server named CDN in .net core using MongoDB GridFS and angular js.

从各种来源,我尽力解决了这个问题。 。
最后我们做到了。

From various sources I tried my best to solve the issue.And finally we done this.

推荐答案

我使用Visual Studio 2017和.NETCore 1.1
为此,请遵循以下步骤:
1.在MongoDB GridFS中编写代码
创建

I used Visual Studio 2017 and .NETCore 1.1To do so I follow the followings:1. Write Code in MongoDB GridFScreate an interface like

public interface IGridFsRepository : IDisposable
 {
    Task<string> UploadAsync(IFormFile file);
    Task<bool> AnyAsync(ObjectId id);
    Task<bool> AnyAsync(string fileName);
    Task DeleteAsync(string fileName);
    Task DeleteAsync(ObjectId id);
    Task<GridFSDownloadStream<ObjectId>> DownloadAsync(string fileName);
    Task<GridFSDownloadStream<ObjectId>> DownloadAsync(ObjectId id);
    object GetAllFilesByContentType(string contentType, int skip, int
    take);
    object GetAllFiles(int skip, int take);
 }

然后创建MongoDbCdnContext:

then create MongoDbCdnContext:

  public abstract class MongoDbCdnContext
    {
    public IGridFSBucket GridFsBucket {get;}
     protected  MongoDbCdnContext(string connectionStringName)
      {
        var config = new ConfigurationBuilder()
            .SetBasePath(Directory.GetCurrentDirectory())
            .AddJsonFile("appsettings.json")
            .Build();
        var connectionString =
   config.GetConnectionString(connectionStringName);
        var connection = new MongoUrl(connectionString);
        var settings = MongoClientSettings.FromUrl(connection);
        //#if DEBUG
        //            settings.ClusterConfigurator = builder =>
       builder.Subscribe<CommandStartedEvent>(started =>
        //            {
        //                Debug.Write(started.Command);
        //            });
        //#endif
        var client = new MongoClient(settings);
        var database = client.GetDatabase(connection.DatabaseName);
        GridFsBucket = new GridFSBucket(database);
    }
  }

然后实施它:

public class GridFsRepository : MongoDbCdnContext,
     IGridFsRepository
{
    public GridFsRepository() : base("MongoCdn")
    {
    }
    public async Task<string> UploadAsync(IFormFile file)
    {
        var options = new GridFSUploadOptions
        {
            Metadata = new BsonDocument("contentType", file.ContentType)
        };
        using (var reader = new
          StreamReader((Stream)file.OpenReadStream()))
        {
            var stream = reader.BaseStream;
            var fileId = await
         GridFsBucket.UploadFromStreamAsync(file.FileName, stream,
       options);
            return fileId.ToString();
        }
    }
    public async Task<bool> AnyAsync(ObjectId id)
    {
        var filter = Builders<GridFSFileInfo>.Filter.Eq("_id", id);
        return await GridFsBucket.Find(filter).AnyAsync();
    }
    public Task<bool> AnyAsync(string fileName)
    {
        var filter = Builders<GridFSFileInfo>.Filter.Where(x =>
     x.Filename == fileName);
        return GridFsBucket.Find(filter).AnyAsync();
    }
    public async Task DeleteAsync(string fileName)
    {
        var fileInfo = await GetFileInfoAsync(fileName);
        if (fileInfo != null)
            await DeleteAsync(fileInfo.Id);
    }
    public async Task DeleteAsync(ObjectId id)
    {
        await GridFsBucket.DeleteAsync(id);
    }
   private async Task<GridFSFileInfo> GetFileInfoAsync(string fileName)
    {
        var filter = Builders<GridFSFileInfo>.Filter.Eq(x => x.Filename,
        fileName);
        var fileInfo = await
      GridFsBucket.Find(filter).FirstOrDefaultAsync();
        return fileInfo;
    }
    public async Task<GridFSDownloadStream<ObjectId>>
  DownloadAsync(ObjectId id)
    {
        return await GridFsBucket.OpenDownloadStreamAsync(id);
    }
    public async Task<GridFSDownloadStream<ObjectId>>
 DownloadAsync(string fileName)
    {
        return await
        GridFsBucket.OpenDownloadStreamByNameAsync(fileName);
    }
    public IEnumerable<GridFSFileInfoDto> GetAllFilesByContentType(string
   contentType, int skip, int take)
    {
        var filter = Builders<GridFSFileInfo>.Filter
            .Eq(info => info.Metadata, new BsonDocument(new
          BsonElement("contentType", contentType)));
        var options = new GridFSFindOptions
        {
            Limit = take,
            Skip = skip,
        };

        var stream = GridFsBucket.Find(filter, options)
            .ToList()
            .Select(s => new GridFSFileInfoDto
            {
                Id = s.Id,
                Filename = s.Filename,
                MetaData = s.Metadata,
                Length = s.Length + "",
                UploadDateTime = s.UploadDateTime,
            })
            .ToList();
        return stream;
    }
    public IEnumerable<GridFSFileInfoDto> GetAllFiles(int skip, int take)
    {
        var options = new GridFSFindOptions
        {
            Limit = take,
            Skip = skip,
        };

        var stream =  GridFsBucket.Find(new
 BsonDocumentFilterDefinition<GridFSFileInfo<ObjectId>>(new
 BsonDocument()), options)
            .ToList()
           .Select(s => new GridFSFileInfoDto
            {
                Id = s.Id,
                Filename = s.Filename,
                MetaData = s.Metadata,
                Length = s.Length + "",
                UploadDateTime = s.UploadDateTime,
            })
            .ToList();
        return stream;
    }
    public void Dispose()
    {
        GC.SuppressFinalize(this);
    }
}

然后在.netcore Web API中创建控制器

then create a controller in .netcore web api

 [EnableCors("AllowAll")]
 [ValidateModel]
  [Route("api/files")]
 public class FileController : Controller
 {
    private readonly IGridFsRepository _gridFsManager;
    public FileController(IGridFsRepository gridFsRepository)
    {
        _gridFsManager = gridFsRepository;
    }


    [AllowAnonymous]
    [HttpGet("{fileName}",Name = "GetByFileName")]
    public async Task<IActionResult> GetByFileName(string fileName)
    {
        return Ok(await _gridFsManager.DownloadAsync(fileName));
    }

    [AllowAnonymous]
    [HttpGet("{id}",Name = "GetById")]
    public async Task<IActionResult> GetByFileName(ObjectId id)
    {
        return Ok(await _gridFsManager.DownloadAsync(id));
    }

    [HttpPost]
    public async Task<IActionResult> Upload([FromForm] IFormFile file)
    {
        if (file != null)
        {
            if (file.ContentType.Contains("image"))
                return BadRequest("Sorry only image jpg/jpeg/png
    accepted");

            if (file.Length >= (300 * 1024))
                return BadRequest($"Sorry {file.FileName} is exceeds
          300kb");

            await _gridFsManager.DeleteAsync(file.FileName);
            await _gridFsManager.UploadAsync(file);

        }
        return NoContent();
    }

    [HttpDelete]
    public async Task<IActionResult> Delete(string id)
    {
        await _gridFsManager.DeleteAsync(id);
        return NoContent();
    }

}

请不要忘记解决依赖性:

please do not forget to resolve dependency:

     services.AddScoped<IGridFsRepository, GridFsRepository>();

从html归档:

     <div class="btn">
            <span>Logo</span>
            <input type="file" data-ng-model="cp.data.file"
              id="selectedFile" name="selectedFile">
        </div>

进入UI层:
首先创建一个角度工厂:

lets go to UI layer:first create an angular factory:

(function () {
        "use strict";
        angular.module("appCdn", [])
            .factory('fileUploader', ["$http", function ($http) {
            return {
            upload: function (url, file, fileMaxSize, fileName, callback) {
                if (this.isValidFileSize(fileMaxSize, file)) {
                    var fd = new FormData(); //Create FormData object
                    if (fileName)
                        fd.append("file", file, fileName);
                    else
                        fd.append("file", file);

                    $http.post(url, fd, {
                        transformRequest: angular.identity,
                        headers: { 'Content-Type': undefined }
                    }).success(function (data) {
                        callback();
                    }).error(function (data) {
                        Materialize.toast("Sorry! error in file upload", 4000, 'red');
                    });
                } else {
                    Materialize.toast("Sorry! " + file.name + "  exceeds 300kb", 4000, 'red');
                }
            },

            isValidFileSize: function (maximumAllowedSize, file) {
                if (file.size >= maximumAllowedSize) {
                    return false;
                } else {
                    return true;
                }
            }
            };
        }
            ]);
        })();

之后,创建了一个角度控制器:

after that create an angular controller:

angular.module('ecom').controller('companyProfileCtrl',
    ['$http', 'config', "confirmation", "fileUploader",companyProfile]);
    function companyProfile($http, config, confirmation, fileUploader) {
    var vm = this; vm.getProfile = function () {
    $http.get(config.apiUrl + "companyProfile")

        .success(function (response) {
          vm.data = response;
     });
     };

      vm.save = function (profile) {
         confirmation.confirm(function () {
        $http.post(config.apiUrl + "companyProfile", profile)
            .success(function (data) {
                var fileName = "";
                if (profile.id) {
                    fileName = profile.id;
                } else {
                    fileName = data;
                }
                vm.upload(fileName,
                    function () {
                        Materialize.toast("succeeded", 4000, 'green');
                        window.location.href = window.history.back();
                    });
            })
            .error(function (data) {
                Materialize.toast(data, 4000, 'red');
            });
          });
     };

         vm.upload = function (fileName, callback) {
             var photo = document.getElementById("selectedFile");
             var file = photo.files[0];
             if (file) {fileUploader.upload(config.cdnUrl + "files",

          //300kb
              file, 1024  * 300, fileName, callback);
             }
         };
            };

最后以html显示图像:

finally to show the image in html:

  <div><img src="http://localhost:41792/api/files/{{cp.data.id}}"

   class="img-responsive visible-md visible-lg img-margin-desktop"
    width="350" height="167" />
        </div>

最后我们做到了。这就是全部。
我一直期待着受到批评。

finally we done this. this is all.I always looking forward to receiving criticism.

这篇关于如何使用MongoDB GridFS和AngularJs在dotnet核心中创建CDN服务器的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-20 01:29