2014-04-07 1 views
4

UI (데이터 유형 바이트 [])가있는 이미지를 업로드하고 데이터베이스에 저장하려고합니다. .NET WebAPI에 AngularJS를 연결하여 MSSSQL Server에 저장합니다. 이러한 기술을 사용하여 좋은 예를 찾을 수 없습니다.AngularJS .Net WebAPI 이미지 업로드 및 데이터베이스 (MSSQL)에 저장

질문 : 어떤 접근 방법을 사용하는 것이 더 좋습니까? ng-upload, FormData, ArrayBuffer, 이미지를 바이트로 변환하는 등의 작업을 수행하고 WebAPI에서 어떻게 잡을 수 있습니까?

감사합니다.

+0

이 링크를 참조하십시오 http://stackoverflow.com/questions/1347461/saving-images-files-or-blobs –

답변

2

요즘이 기능을 사용하고 있습니다. 나는 나의 경험을 공유한다 (명백하게 개선 될 수있다). 내가 사용하는 주요 구성 요소는 다음과 같습니다

스택은 다음과 같습니다 각도

. js 이미지 업 로더

내가 말했듯이, 나는 각도 파일 업 로더를 사용한다. 이 공식 문서를 추가 할 너무 많이는 없지만 my uploader configuration은 다음과 같습니다

$scope.uploader = $fileUploader.create({ 
    scope: $scope, 
    url: DisciturSettings.apiUrl + 'User/Image', 
    queueLimit: 1, 
    formData: [{ UserId: AuthService.user.userid }], 
    headers: AuthService.getTokenHeader() 
}); 

HTTP 요청에 사용자 ID를 전송하는인가 된 경로

WebApi 2 액션에 대한 액세스 권한을 부여하기 위해

서비스가 주요 작업입니다. 다음은 code입니다. 이 단계에서 볼 수 있듯이이 이미지의 두 가지 리사이징이 통과되었습니다 (하나는 사용자 프로필 그림 용이고 다른 하나는 사용자 미리보기 그림 용). 이 외에도 문자열의 byte []를 변환하고 다음 검색을위한 문자열을 준비합니다. 이렇게하면이 부분 "data : image/gif; base64"가 추가되므로 EntityFramework를 통해 다음 엔티티 판독 값에서 결과를 더 이상 조작 할 필요가 없으며 각도 템플릿에 직접 입력 할 수 있습니다.

<img ng-src="{{local.user.image}}" /> 

분명히 다르게 만들 수도 있지만 내 경우입니다. 단순히 이미지를 저장하기 위해 NVARCHAR를 사용하는 순간

데이터베이스

.

제 첫 번째 시도이므로 힌트가 있으면 주저하지 말고 확실히 개선 할 수 있습니다. 모양이나 파일을 저장하는 전략으로

+0

당신이 방법의 예를 가지고 있습니까 ' DB에 다시 저장 하시겠습니까? esp 당신이 그것을 스트리밍한다면. – Mastro

+1

내 대답은 모든 코드, 특히 [db에 이미지를 저장하는 데 사용되는 서비스] (https://github.com/williamverdolini/discitur-api/blob)를 찾을 수 있습니다. /master/Controllers/UserController.cs#L133), – wilver

관련 문제