私は、コードにあまり話をしなかった、写真をアップロードするために主にここにいます。
方法1:フォームフォーム経由でアップロード
リア:
/// <要約> ///フォームフォームから提出された写真を、アップロード /// </要約> /// <返します> </リターンのA> [ルート( "アップロード/ FormImg")] [HttpPost] 公共のActionResult UploadImg(一覧<IFormFile>ファイルを) { IF(files.Count <1)。 { リターンエラー() "ファイルが空である"; } ファイルのアドレスを返す// ;ファイル名の一覧<文字列>一覧新しい新しい= <文字列>() = VARを今DateTime.Now; //ファイルストレージパス VAR filePathに= String.Formatの( "/アップロード / {0} / {1} / {2} /"、now.ToString( "YYYY")、now.ToString( "YYYYMM ")、now.ToString(" YYYYMMDD ")); //現在のWebディレクトリを取得 VARをwebRootPath = _hostingEnvironment.WebRootPath。 IF(Directory.Exists(webRootPath + filePathに)!) { Directory.CreateDirectory(webRootPath + filePathに); } 試し { (項目varにファイル)foreachの { IF(!項目= NULL) { #Regionの画像判断条件ファイル //ファイルのサフィックス VAR fileExtension = Path.GetExtension(item.FileName); 裁判官//サフィックスが写真であるかどうか のconst文字列fileFilt = ".GIF | .JPG | .JPEG | .PNG"。 IF(fileExtension == NULL) { BREAK; //リターンエラー( "アップロードファイルないサフィックス"); } IF(fileFilt.IndexOf(fileExtension.ToLower()、StringComparison.Ordinal)<= -1) { BREAK; / /( "画像のJPG、PNG、GIF形式をアップロードしてください")エラーを返す; } //ファイルサイズを決定する 長い長さ= item.Length; IF(長さ> 1024×1024×2)// 2M { BREAK。 ( "2Mを超えることはできませんファイルをアップロード")エラーを返す//; 商品.CopyTo(FS); fs.Flush(); } } #endregionの VAR strDateTime = DateTime.Now.ToString( "yyMMddhhmmssfff"); //文字列の取得には時間 VARをstrRan = Convert.ToString(新しいランダム( )次(100、999)); //は、 3つの乱数の生成 VARをstrRan + + = strDateTime SAVENAME fileExtension; //画像データを挿入して 使用(FS = System.IO.File.CreateのFileStream(filePathにwebRootPath + + SAVENAMEが)) { filenames.Add(filePathにSAVENAME +); } } 成功を返す(ファイル名) ; } キャッチ(例外EX) { //ここにエラーレコードの原因増やすログ )//ex.ToStringを(; リターンエラー( "アップロードに失敗しました" ); } }
私は主に画像データをレンダリングするためにここにいるので、どこのニーズに応じて、自己調整、条件を決定する画像ファイルによりがあります。ストレージ・ファイルを含みます。
フロント:
<!DOCTYPE HTML> <HTML> <HEAD> <TITLE>ネットコアWEBAPI图片上传</ TITLE> <メタのcharset = "UTF-8" /> ます。<script type = "text / javascriptの" SRC = "/のJS / jqueryの-1.10.2.min.js "> </ SCRIPT> ます。<script type =" text / javascriptの」srcが= "/のJS / jquery.form.min.js"> </ SCRIPT> </ HEAD> <BODY> <H1>通过フォーム表单提交</ H1> <フォームID = "あるmyForm"名前= "あるmyForm"メソッド= "ポスト"にenctype = "multipart / form-データ" アクション= "https://ではlocalhost:44376 /アップロード/ FormImg "> の<input type ="ファイル"名= "ファイル" ID = "ファイル"値="アップロードされたファイルを選択して"複数の/> <タイプ=のINPUT"ボタン"上記のID =" submitbtn "値=は"提出"のonclick =" uplpadfile() "> </ FORM> の<div> < / DIV> 写真、リターンアドレスをアップロード <DIV ID = "imglist">
</ div> <スクリプトタイプ= "テキスト/ javascriptの">
//前端第一种提交方式 関数uplpadfile(){ //获取表单的数据 VAR FORMDATA varファイル= $( "#ファイル")(0)を取得。 VARファイル= file.files。 VaRのFORMDATA =新しいいるFormData(); ため(VAR i = 0; iがfiles.lengthを<; Iは++){ formdata.append( "ファイル"、ファイル[I])。 } $アヤックス({ タイプ: 'ポスト'、 データ:FORMDATA、 contentTypeの値:false、 PROCESSDATA:偽、 URL: "https://ではlocalhost: 成功:機能(結果){ 場合(result.Success){ VAR imglist = result.Data; (imglistでVAR I){のための $( "#のimglist")APPEND( '<IMG SRC = "' + imglist [I] + '" />'。 ); } }他{ アラート( 'コミットが失敗し、提出を再試行してください'); } } }) ;} </ SCRIPT> </ BODY> </ HTML>
書かれた道を提出アップロードに加えて、データの2件の他の提出があります。
第二の方法:
関数uplpadfile(){ //获取表单的数据 VAR FORMDATA =新しいいるFormData(のdocument.getElementById( "あるmyForm")); $アヤックス({ タイプ: 'ポスト'、 データ:FORMDATA、 contentTypeの値:false、 PROCESSDATA:偽、 URL: "https://ではlocalhost:44376 /アップロード/ FormImg"、 成功:機能(結果){ 場合(結果。成功){ VARのimglist = result.Data; imglistで(VAR i)に対する{ $( "#のimglist")(追記'<IMG SRC = " '+ imglist [I] +'" />')。 他{} アラート( 'コミット失敗し、提出を再試行してください'); } } }) ;} </ SCRIPT>
三つの方法:
<スクリプトタイプ= "テキスト/ javascriptの"> 関数uplpadfile(){ $( "#のあるmyForm")ajaxSubmit(関数(結果){。 )result.Success(IF { VAR imglist = result.Data; (VAR I imglistにするため){ $( "#1 imglist")(付加'<IMG SRC = " '+ imglist [I] +'" />'); } }他{ アラート( '提交失败、重新尝试提交'); } } ); }。 </ SCRIPT>
ここで、フロントには、注意することがポイント。
1、フォームテーブルを用いて連結しなければならない のenctype =「マルチパート/フォームデータ 」 タブ
2、ファイルアップロードコントロールファイル、あなたが複数の画像をアップロードしたい場合は、あなたが追加する必要があり 、複数 のラベルを
3、のように: formdata.append(「ファイル」、ファイル[I]) の ファイル と同じパラメータおよびインタフェース・ファイル名を受け入れなければなりません
4フォーム2と3つの方法:<タイプ=「ファイル」名=「ファイル」のINPUT> 名前 と同じパラメータとインタフェースファイル名を受け入れなければなりません
要約の仕方によって、フォームの送信:
書類の提出のフロントエンドは、以下の3つの方法で使用することができます。
ファイルは、フォームや他のデータと一緒に提出する場合は、第二と第三のアプローチを使用することができます。
あなたが唯一の独立したデータファイルを送信したい場合は、使用することができます。
====================豪華な分割線====================
第二の方法:Base64で文字をアップロードすることにより、
リア:
/// <要約> ///文件上传、Base64で /// </要約> /// <PARAM NAME = "fileBase64"> Base64で</ param>の /// <PARAM NAME = "FILENAME">文件名< / PARAM> /// <戻る> </戻り> [HttpPost] [ルート( "アップロード/ Base64で")] 公共のActionResult UploadBase64(ストリングfileBase64、文字列filename) { バイト[]バイト= fileBase64.ToBytes_FromBase64Str()。 VAR fileExtension = Path.GetExtension(filename)で。 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。 文字列のファイルパス= "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が写真をアップロード</ TITLE> <METAのcharset = "UTF-8" /> <スクリプトタイプの= "テキスト/ JavaScriptを" SRC =「/ JS / 1.10.2.min.js-jQueryの"> </ SCRIPT> <スクリプトタイプ="テキスト/ JavaScriptを"srcが=" / JS / jquery.form.min.js「> </ SCRIPT> </ HEAD> <BODY> <H1> Base64で文字に文書を</ H1>を提出 <= "ファイル"名入力タイプ "= = "BASEFILE" ID = "BASEFILE"値の複数/アップロードするファイルを選択し、"> 「=タイプの<スクリプトをテキスト/ JavaScriptを"> $(" #のBASEFILE ")。変更(機能(){ VARのBASEFILE = Base64で(のdocument.getElementById("BASEFILE「)); }) //アップロード 機能updateBackground(ファイル名、imgurl){ //提出する前に、書式設定タグを除去すること imgurl = imgurl.replace( "データ:画像/ JPEG、BASE64、"、 "").replace( "データ:画像/ PNG、BASE64、"、 "").replace( "データ:画像/ JPG、BASE64、" 、 "").replace( "データ:画像/ GIF、BASE64、"、 "").replace( "データ:画像/ BMP、BASE64、"、 ""); // urlElement.innerHTML = imgurl。 VaRのbusinessParam = { fileBase64:imgurl、 ファイル名:ファイル名 }。 $アヤックス({ URL: 'https://ではlocalhost:44376 /アップロード/ Base64で' データ:businessParam、 種類: 'ポスト'、 データ型: 'JSON'、 成功:機能(結果){ 場合(結果。 } }、 機能(データ){:エラー ;:警告(+ data.Error "エラー") } }) } //ドキュメントのBase64に 機能をBase64(ファイル){ (typeof演算(IF FileReaderの)=== '未定義'){ アラート( "申し訳ありませんが、お使いのブラウザは、FileReaderのをサポートする最新のブラウザ操作を使用しません!"); } (= VARリーダーFileReaderの新新); VAR = file.files POS [0 ] .name.lastIndexOf( ""); varが= [0] .name.substring入力file.files(POS + 1); //ファイルフォーマットを決定します もし(type.toLowerCase()!= "PNG" && type.toLowerCase()!= 'のjpg' && type.toLowerCase()!= 'JPEG' && type.toLowerCase()!= 'gifの' && 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クラスのメソッドを拡張したものです
パブリック静的バイト[] ToBytes_FromBase64Str(この文字列base64Str) { Convert.FromBase64String(base64Str)を返します。 }
エラーや場所の欠如は、私を修正してください場合は、お互いから学びます。
参考記事、大きなファイルのアップロードについての話もあります:
https://www.cnblogs.com/seabluescn/p/9229760.html
回します。https://www.cnblogs.com/leoxuan/articles/11087121.html