写真を含むVUE送信フォームフォーム、要素、UI

<EL-形式:モデル= "フォーム" REF = "フォーム"ラベル幅= "100pxに"> 
        <EL-フォーム項目ラベル= "地址"プロップ= "URL"> 
          <EL-入力V-モデル= "形た.url "プレースホルダ= "请输入地址"> </ EL-入力> 
        </ EL-フォーム項目> 
        <EL-フォーム項目ラベル= "时长"プロップ= "時間"> 
          <EL-入力タイプ="数"プレースホルダ="请输入时长"V-モデル= "form.time" @ keyup.native = "handleClick"> </ EL-入力> 
        </ EL-フォーム項目> 

        <EL-フォームアイテム幅=" 200 "ALIGN ="中心"ラベル= "选择文件"プロップ= "パス"> 
          の<input type = "ファイル"クラス= "顔"受け入れます="inputer「変更@ = "画像/ *はgetFile($イベント)" REF = ""> 
        </ EL-フォーム項目> 
        <EL-フォーム項目のラベル= "备注"小道具= "発言"> 
        <EL-フォーム項目> 
          <EL-入力プレースホルダ= "请输入备注" V-モデル= "form.remarks"> </ EL-入力>
        </ EL-フォーム項目> 
            提交</ EL-ボタン> <EL-ボタンタイプ= "主は、" @ "をonSubmit($イベント)"をクリック=> 
        </ EL-フォーム項目> 
      </ EL-form>を
getFile(イベント){
         この .form.multipartFile = event.target.files [0 ]。
        もし(formData.get( 'multipartFile')){ // 重新选择图片 
            FORMDATA。削除( 'multipartFile'を)。
        } 
        formData.append( "multipartFile"、event.target.files [0 ])。
        
    }、
onSubmit(イベント){
         これは ..参考文献$ [ '形態']検証((有効)=> {
             IF (有効){ 
                event.preventDefault(); 
                認可させ = ()を入手トークン; 
                。FORMDATA 削除( 'PKIDを'); //は、二次改変形態が防ぐために添加した後に繰り返さ 
                。FORMDATA 削除(「時間」); // 変更されたフォームは、二繰り返し加算を防止する 
                。FORMDATAが削除(「備考」); // 二繰り返し加え防止するために修飾された形態 
                FORMDATAを。削除(「URLを」); // 二繰り返し添加することを防止する修飾された形態を 
                FORMDATA。削除('ファイル名'); // 防止二次修改表单后重复添加 
                formData.append( "PKID"、この.form.pkId)。
                formData.append( "時間"、この.form.time)。
                formData.append( "発言"、この.form.remarks)。
                formData.append( "URL"、この.form.url)。
                formData.append( "FILENAME"、 '広告' ); 
                axios({ 
                    メソッド: 'ポスト' 
                    URL: '/ API / *****'  '認可':承認、 'コンテンツタイプ': 'マルチパート/フォームデータ' } 
                。})を(({データ}) => {
                     場合(data.code === 0 ){
                         この$。メッセージ({ 
                            showClose:
                            メッセージ: "成功" 
                            種類: "成功" 
                        }); 
                    } {
                         この$({知らせる。
                            タイトル: "失败" 
                            メッセージ:「編集に失敗しました」
                            タイプ: "危険" 
                            時間: 2000 
                        })。
                    } 
                })。キャッチ関数(誤差){ 
                    にconsole.log(エラー); 
                }); 
            } { 
                にconsole.log( 'エラー提出!!' );
                リターン はfalse ; 
            } 
        })。
        
    }、

 

おすすめ

転載: www.cnblogs.com/lzzxm/p/12434233.html