.NETのコアは、写真をアップロードする2つの方法をWEBAPI

私は、コードにあまり話をしなかった、写真をアップロードするために主にここにいます。

方法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

おすすめ

転載: www.cnblogs.com/pingming/p/11330921.html