AjaxベースのformData画像とデータアップロードルーの実装

今回はAjaxベースのformData画像とデータアップロードの実装についてお届けします。 AjaxベースでformData画像とデータをアップロードする際の注意点は何ですか？ 私は最近、ユーザー データとフォームのアップロードに関するプロジェクトに取り組み、多くの落とし穴に遭遇しました。皆さんのお役に立てればと思い、その概要をここで共有します。 (Xiaobai、皆さんもっとコミュニケーションをとってください)

あまり詳しくは説明しないので、コードだけ見ていきましょう! ！

1. アップロードコンポーネント

説明、プロジェクトはvueフレームワークに基づいています

<template>
  <p>    
    </p>
<p>
       </p>
<p>     
        <img  class="shopicon lazy" src="/static/imghwm/default1.png" data-src="../../assets/head.jpg" alt="AjaxベースのformData画像とデータアップロードルーの実装" >
        </p>
<p>开心就好的小店</p>
      </template>

         

      

        商品名称：       

      

        商品类型：                    请选择           图书           卡券           服装           礼品           运动装备           电子设备           日用百货           其他                

             

        商品描述              

 class="startleft">               

        单价:                

      

        数量:                

      

        联系电话:                

      

        地址:                

      

        图片                               

             

        

                              

        

                              

                  

      

        
• 首页
        
• 返回货架
        
• 放弃编辑
        
• 上架
      

         

   説明、これには写真をアップロードするための2つのコンポーネントが含まれています、つまり、複数の写真を選択できます。後者はシングルファイルモードです。

2. 次に、写真のプレビューです

viewimg($event) {
  //获取当前的input标签
  var currentObj = event.currentTarget; 
  //找到要预览的图片img标签，亦可动态生成
  var img = currentObj.parentNode.children[0]; 
  setImagePreview(currentObj, img);
  function setImagePreview(docObj, imgObjPreview) {
    if (docObj.files && docObj.files[0]) {
      imgObjPreview.style.display = 'block';
      imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
    }
  }
}

この部分の主な機能は、もちろん、ここに複数の写真を表示することです

3. 画像のアップロードです。

説明:

は、キーと値のペアの形式でデータを保存する formData.append('barterCategoryid', _self.goodstype); に似ていますが、formData.append("file", file.files[0]) , file.files[0].name); 最初のパラメータはサーバーが受け取るパラメータ名、2 番目はファイル オブジェクト、3 番目のパラメータはファイル名です。このようにして、複数のファイルをファイルに追加できます。配列形式のサーバー。

バックエンドがこのタイプのファイルを受信する場合、タイプは次のように指定されます: MultipartFile タイプ

特別な指示:

processData: false、

contentType: false、

これら 2 つの文を追加する必要があります。それ以外の場合は、データはシリアル化され、バックエンドがそれを認識できなくなります

この記事のケースを読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

ファイルプロトコルのAJAXリクエストをサポートするようにGoogle Chromeを設定する方法

phpを使用してajaxによってバックグラウンドに送信されたデータを受信する方法

以上がAjaxベースのformData画像とデータアップロードルーの実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。