나는 코드에 말을 많이하지 않았다 사진을 업로드 주로 여기입니다.
방법 1 : 폼 양식을 통해 업로드
후면 :
/// <요약>
/// 양식 서식에 의해 제출 된 사진을 업로드
/// </ 요약>
/// <리턴 A> </ 반환 A>
[경로 ( "업로드 / FormImg")]
[HttpPost]
공공 ActionResult UploadImg ( 목록 <IFormFile> 파일)
{
IF (files.Count <1).
{
반환 오류 () "파일이 비어";
}
파일의 주소를 반환 //
; 파일 이름 목록 <문자열> 목록 새 새 = <문자열> ()
= VAR를 지금 DateTime.Now;
// 파일 저장 경로
VAR을 webRootPath = _hostingEnvironment.WebRootPath;
VAR적인 filePath = 및 String.format ( "/ 업로드 / {0} / {(1)} / {2} /"now.ToString ( "YYYY") now.ToString ( "YYYYMM "), now.ToString ("YYYYMMDD "));
// 현재의 웹 디렉토리를 얻을
(! Directory.Exists (webRootPath +적인 filePath)) IF
{
; Directory.CreateDirectory (webRootPath +적인 filePath)
}
은 try
{
(항목 VAR의 파일)을 foreach는
{
IF (! 항목 = NULL)
{
# 지역 이미지 파일의 상태를 판단
// 파일 접미사
var에 fileExtension = Path.GetExtension (item.FileName);
// 접미사가 화상 있는지 여부를 확인
const를 문자열 fileFilt = ".gif 중요 | .JPG | .JPEG | .PNG";
만약에 (fileExtension == NULL을)
{
BREAK;
// 반환 오류 ( "업로드 파일 접미 말 없음");
}
IF (fileFilt.IndexOf (fileExtension.ToLower (), StringComparison.Ordinal) <= -1)
{
BREAK;
/ / ( "이미지 JPG, PNG, GIF 형식을 업로드하세요") 오류를 반환;
}
// 파일의 크기를 결정
긴 길이 = item.Length;
IF (길이> 1024 * 1024 * 2) // 2M
{
BREAK;
( "2M보다 클 수 없습니다 파일을 업로드") 오류를 반환 //;
}
#endregion의
VAR strDateTime = DateTime.Now.ToString ( "yyMMddhhmmssfff"); // 문자열 인수 시간
. VAR strRan = Convert.ToString (새 랜덤 () 다음 (100, 999)); // 세 난수 생성
, VAR의 SAVENAME strRan + + = strDateTime fileExtension
//는 화상 데이터를 삽입
은 USING (FS = System.IO.File.Create FileStream을 (여기서 filePath webRootPath + + SAVENAME))
{
아이템 .CopyTo (FS)
fs.Flush ();
}
filenames.Add (여기서 filePath SAVENAME +);
}
}
성공을 리턴 (파일명의) ;
}
캐치 (예외 EX)
{
// 여기에 오류 레코드의 원인이 증가 로그인
//ex.ToString ();
반환 오류 ( "업로드 실패" );
}
}
나는 이미지 데이터를 렌더링하는 데 주로 여기에 오전, 그래서 조건을 결정하는 것은 그림 파일에 더이 어디 요구, 자기 조정에 따라. 저장 파일 포함.
전면 :
<! DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE> 닷넷 코어 WebApi图片上传</ 제목>
<메타 문자 집합 = "UTF-8"/>
<스크립트 유형 = "텍스트 / 자바 스크립트"SRC는 = "/의 JS / JQuery와-1.10.2.min.js "> </ script>
<스크립트 유형 ="텍스트 / 자바 스크립트 "SRC는 ="/의 JS / jquery.form.min.js "> </ script>
</ head>
<body>
<H1>通过형태表单提交</ H1>
<form 자료 = "myForm을 'NAME ="myForm을 "METHOD ="POST "에 enctype ="multipart / form-data "로
작용 ="HTTPS : // 로컬 호스트 : 44,376 / 업로드 / FormImg ">
<input 타입 ="파일 "NAME ="파일 "ID ="파일 "값 ="업로드 된 파일을 선택 "다중 />
<유형 =의 INPUT"버튼 "위에서 언급 한 id ="submitbtn "값 ="이 제출 "onclick을 ="uplpadfile () ">
</ FORM>
<DIV> < / DIV>
사진을 업로드, 반환 주소
<DIV ID = "imglist">
URL : "https : //로 로컬 호스트 :
</ DIV>
<스크립트 유형 = "텍스트 / 자바 스크립트">
//前端第一种提交方式
기능 uplpadfile () {
//获取表单的数据
VAR formdata의
var 파일 = $ ( "# 파일"). 수 (0) ;
VAR 파일 = file.files;
VAR의 새로운 FormData formdata = ();
위한 VAR (I = 0; I는를 <files.length; 내가 ++) {
formdata.append ( "파일을"파일 [I]);
}
$ 아약스 ({
유형 : '포스트'
데이터 : formdata,
ContentType을 : 거짓,
processData : 거짓,
성공 : 기능 (결과) {
경우 (result.Success) {
result.Data의 imglist = VAR]
(imglist의 VAR I)에 대한 {
$ ( "#의 imglist")를 APPEND ( '<IMG SRC에 = "'+ imglist [I] + '"/>');
}
} 밖의 {
경보 ( '커밋은 제출을 재 시도 실패')
}
}
)}
}
</ SCRIPT>
</ BODY>
</ HTML>
방법을 작성 제출할 업로드하기 또한, 데이터의 두 개의 다른 제출이 있습니다 :
두 번째 방법 :
uplpadfile 함수 () {
//获取表单的数据
VAR formdata = 새로운 FormData (document.getElementById를 ( "myForm을"));
$ 아약스 ({
유형 : '포스트'
데이터 : formdata,
ContentType을 : 거짓,
processData : 거짓,
URL : "https : //로 로컬 호스트 : 44376 / 업로드 / FormImg"
성공 : 기능 (결과) {
경우 (결과. 성공) {
var에 imglist = result.Data;
imglist의 VAR (I)에 대한 {
$ ( "#의 imglist") (추가 '<IMG SRC = "'+ imglist [I] + '"/>.');
; 경보 ( '커밋이 제출을 재 시도 실패')
}
}
)}
}
</ SCRIPT>
세 가지 방법 :
<script 타입 = "텍스트 / 자바 스크립트">
함수 uplpadfile () {
$ ( "# myForm을") ajaxSubmit (함수 (결과) {.
(result.Success) {경우
VAR의 imglist = result.Data;
VAR (i에 imglist에서 ) {
$ ( "#의 imglist") (추가 '<IMG SRC = "'+ imglist [I] + '"/>').
}
한다} else {
경고 ( '提交失败,重新尝试提交');
}
} );
};
</ script>
여기에 전면주의 할 점 :
1, 양식 테이블과 결합되어야 에 enctype = "다중 / 폼 데이터 " 탭
여러 이미지를 업로드 할 경우 2, 파일 업로드 컨트롤 파일, 당신은 추가해야 할 여러 레이블을
3, 방식 : formdata.append ( "파일", 파일 [I]) 의 파일 같은 매개 변수와 인터페이스 파일 이름에 동의해야합니다
4 양식 두 세 가지 방법 : <유형 = "파일"이름 = "파일"의 INPUT> 이름이 동일한 매개 변수와 인터페이스 파일 이름에 동의해야합니다
요약의 방법으로 제출 양식 :
문서의 제출의 프런트 엔드는 세 가지 방법으로 사용할 수 있습니다.
파일이 형태와 다른 데이터와 함께 제출하는 경우에, 당신은 두 번째와 세 번째 방법을 사용할 수 있습니다.
당신은 단지 별도의 데이터 파일을 제출하려는 경우, 당신은을 사용할 수 있습니다.
==================== 화려한 분할 선 ====================
두 번째 방법 : Base64로 문자를 업로드하여
후면 :
/// <요약>
///文件上传, Base64로
/// </ 요약>
/// <PARAM NAME = "fileBase64">를 Base64 </ PARAM>
/// <PARAM NAME = 'FILENAME ">文件名< / PARAM>
/// <리턴> </ 반환>
[HttpPost]
[도로 ( "업 / Base64로")]
공중 ActionResult UploadBase64 (fileBase64 문자열, 문자열 파일명)
{
바이트 [] 바이트 = fileBase64.ToBytes_FromBase64Str ();
VAR의 fileExtension = Path.GetExtension (파일 이름);
VAR strDateTime = DateTime.Now.ToString ( "yyMMddhhmmssfff"); //取得时间字符串
VAR strRan = Convert.ToString (새로운 랜덤 () 다음에 (100, 999).);
VAR saveName = strDateTime + strRan + fileExtension;
var에 savePath = "업로드 / IMG /"+ DateTime.Now.ToString ( "YYYYMMDD") + "/"+ saveName;
문자열적인 filePath = "https://oss.tiaobox.com/"+ savePath;
시도
{
//将文件上传到阿里云OSS
사용 (MemoryStream을 m = 새로운 MemoryStream을 (바이트))
{
var에 클라이언트 = 새로운 OssClient (aliyunconfig.EndPoint, aliyunconfig.AccessKeyID, aliyunconfig.AccessKeySecret);
PutObjectRequest _objRequest = 새로운 PutObjectRequest (aliyunconfig.BucketName, savePath, m);
client.PutObject (_objRequest);
}
성공 (파일 경로를) 반환;
}
캐치 (예외 EX)
{
WriteSysLog (ex.ToString () 인터페이스 호출 Entity.Base_SysManage.EnumType.LogType 예외.)
반환 오류 ( "업로드에 실패했습니다!");
}
}
이 백엔드 방법, 당신은 단지 파일, 제출 Base64로 문자로 파일을 변환 할 수있는 전면 필요성을 업로드 할 수 있습니다.
위의 방법도 사용할 수 있습니다 여기에 알리 클라우드 OSS에 저장되는 데이터를 저장하는 방법은 로컬로 저장. 궁극적으로 파일 경로를 반환합니다.
전면 :
<! DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE> 닷넷 코어 WebApi 사진을 업로드 </ 제목>
<메타 문자 집합 = "UTF-8"/>
<스크립트 유형 = "텍스트 / 자바 스크립트"SRC = "/ JS / 1.10.2.min.js-jQuery를 "> </ script>
<script 타입 ="텍스트 / 자바 "는이 SRC ="/ JS / jquery.form.min.js "> </ script>
</ head>
<body>
<H1> Base64로 문자로 문서를 </ H1>를 제출
<= "파일"이름 입력 타입 "="basefile "ID ="basefile "값 다중 / 업로드 할 파일을 선택">
"= 유형의 <스크립트를 텍스트 / 자바 스크립트 ">
$ ("#의 basefile "). 변경 (함수 () {
var에 basefile = Base64로 (document.getElementById를 ("basefile "));
})
// 업로드
기능 updateBackground (파일 이름, imgUrl에) {
// 제출하기 전에 서식 태그를 제거
imgUrl에 imgurl.replace = ( "데이터 : 이미지 / JPEG;베이스 64" "") .replace ( "데이터 : 이미지 / PNG;베이스 64" "") .replace ( "데이터 : 이미지 / JPG;베이스 64" "") .replace ( "데이터 : 이미지 / GIF;베이스 64" "") .replace ( "데이터 : 이미지 / BMP;베이스 64" "");
// urlElement.innerHTML = imgUrl에;
var에 businessParam = {
fileBase64 : imgUrl에,
파일 이름 : 파일 이름
};
$ 아약스 ({
URL : 'https : //로 로컬 호스트 : 44376 / 업로드 / Base64로'
데이터 : businessParam,
유형 : '포스트',
dataType와 'JSON',
성공 : 기능 (결과) {
경우 (결과.
}
}
오류 : 기능 (데이터) {
경고 ( "오류 :"+ data.Error);
}
})
}
// Base64로의에 문서
기능 Base64로 (파일) {
IF (대해서 typeof합니다 (을 FileReader는) === '정의되지 않은' ) {
경고 ( "죄송합니다을 FileReader를 지원하지 않는 브라우저는 최신 브라우저 작업을 사용!");
}
var에 판독기을 FileReader 새로운 새로운 = ();
VAR을 = (POS [0] .name.lastIndexOf을 file.files ". ");
VAR은 = ([0] .name.substring 입력 file.files POS + 1).;
// 파일 포맷을 결정
경우 (type.toLowerCase ()! = "PNG"&& type.toLowerCase ()! = 'JPG'&& type.toLowerCase ()! = 'JPEG'&& type.toLowerCase ()! = '지프'&& type.toLowerCase ( ) = 'BMP') {!
경고 ( "格式의错误,请上传'PNG, JPG, JPEG, BMP, GIF'를格式文件");
반환;
}
reader.onloadend = (
함수 (E) {
imgUrl에 e.target.result =;
updateBackground (file.files [0] .name을 imgUrl에)
}
);
파일 판독 //
reader.readAsDataURL을 (file.files [0]);
}
</ SCRIPT>
</ BODY>
</ HTML>
Base64로 문자 파일로 전환 문자의 앞 끝 부분에있는 라벨 형식의 파일을 제거 할 필요가 없다는 점에 유의해야한다. 그렇지 않으면 Base64로 - 투 - 다시 문자가 제대로 읽을 수 없습니다.
후단 또는 데이터를 수신하는데, 처리 할 수있다.
그는 추가 :
_hostingEnvironment의 정의
개인 읽기 전용 IHostingEnvironment _hostingEnvironment;
공개 UploadController (IHostingEnvironment hostingEnvironment, iOptions에 <AliyunConfig> _aliyunconfig)
{
_hostingEnvironment = hostingEnvironment;
aliyunconfig = _aliyunconfig.Value;
}
ToBytes_FromBase64Str String 클래스의 메서드는 확장
공용 static 바이트 [] ToBytes_FromBase64Str (문자열 base64Str)
{
Convert.FromBase64String (base64Str)을 반환;
}
오류 또는 장소의 부족, 날 수정하십시오, 서로 배운다.
참조 문서 또한 큰 파일을 업로드에 대한이 이야기한다 :
https://www.cnblogs.com/seabluescn/p/9229760.html
십시오 : HTTPS : //www.cnblogs.com/leoxuan/articles/11087121.html