要素 ui Upload アップロード コンポーネントは、複数の画像のアップロードを実現し、formData は動的な画像を運び、formData は JSON 構造を実装し、画像を順番に並べ、シリアル番号に従って画像を置き換え、画像ファイルにロゴを添付します。

モバイル 2023-04-09 01:31:11 訪問数: null

複数の画像のアップロードを実現し、formData は動的な画像を運び、画像を順番に並べ替え、シリアル番号に従って画像を置き換え、画像ファイルにロゴを添付します

必要

  1. パラメータ リクエスト インターフェイスを運ぶときの formData は、JSON 構造に変換する必要があります。
  2. 順番に表示された写真のリストは、order でマークする必要があります
  3. 単一の画像をアップロードすると、単一の画像に識別パラメータが含まれます (追加、編集)
  4. 複数の写真をアップロードし、複数の写真が注文パラメータを運ぶ (新規、編集)
  5. 編集後の複数の写真の位置関係と、バックエンドが受け取る必要のある識別情報

一連の考え

  1. formData 形式は、(動的) 配列の形式でパラメーターを渡すことをサポートしていますが、オブジェクトを配列に追加するときにオブジェクトを変換 ( JSON.stringify ) する必要があり、ファイルを固定パラメーターで運ぶ必要があります。
  2. 画像を順番にアップロードする場合, 画像を運ぶ際にシーケンス識別子 (要素 ui アップロード アップロード コンポーネント) を追加する必要があります. 画像アップロード コールバック メソッドでは, ファイル リストをトラバースします. トラバーサルでは, 内のパラメータに順番にパラメータを追加します.ファイルであり、値は注文番号です。
  3. 単一画像のアップロード
    3.1 単一画像の追加: ファイルのアップロード時にコールバック メソッドにロゴを追加するだけで済みます。インターフェイスを要求する前に、さまざまなロゴに応じてさまざまなパラメーターを追加します。3.2 単一画像の編集: に従って元の画像を置き換えます
    。 file id および id を新しい画像ファイルに割り当て、処理のためにバックエンドに運びます
  4. 複数の写真をアップロードする（順序要件）
    4.1 複数の写真をアップロードする場合は、それぞれに固定の順序を付ける必要があります（順序はアップロードの最初から固定されており、その後の変更もこの順序に対応しています） 4.2 最初の固定位置の後
    、ファイルを削除した後、ファイルをアップロードします。このとき、アップロードされたファイルは、削除されたファイルの順序で徐々に割り当てられます (たとえば、位置 1 が削除された場合、アップロード時に位置 1 の順序が割り当てられます。位置 1 と 2 が削除された場合、アップロード時に最初に位置 1 の順序が割り当てられます.1 位置の順序が割り当てられ、次に 2 位置の順序が割り当てられます...削除の順序で徐々に
    ） parameters:
    4.3.1 新旧のファイルを判断する必要がある
    4.3.2 新しいファイルを追加するだけ
    4.3.3 新しいファイルのリストをチェックする必要がある sort (通常のリスト順序構造[0],[1]...)

  5. 編集後の複数の写真の位置関係と、バックエンドが
    受け取る必要がある識別情報

formData を JSON 構造コードに変換

let formData = new FormData();
for(var i = 0;i<3;i++){
    
    
	formData.append(`fileData[${
      
      i}].name`,'测试');
	formData.append(`fileData[${
      
      i}].num`,i);
}
//后端（JAVA）使用List接收
//接收数据效果：
fileData:[
	{
    
    
		name:'测试',
		num:0
	},
	{
    
    
		name:'测试',
		num:1
	},
	{
    
    
		name:'测试',
		num:2
	}
]
//forData携带参数为对象时需要进行转换（携带请求接口）
let formData = new FormData();
for(var i = 0;i<3;i++){
    
    
	var obj = {
    
    };
	obj.name = '测试';
	obj.age = 18;
	//formData.append(`fileObj[${i}].obj`,JSON.stringify(obj)); //请求接口时需要对其进行JSON.stringify转换，否则会被formData转化为[object,object]
	formData.append(`fileObj[${
      
      i}].obj`,obj);
	formData.append(`fileObj[${
      
      i}].num`,i);
}
//接收数据效果：
fileObj:[
	{
    
    
		obj:{
    
    
			name:'测试',
			age:18
		},
		num:0
	},
	{
    
    
		obj:{
    
    
			name:'测试',
			age:18
		},
		num:1
	},
	{
    
    
		obj:{
    
    
			name:'测试',
			age:18
		},
		num:2
	}
]
//后端接收转换为JSON即可

単一の画像のアップロード (追加、編集) ロジック

//html
<el-upload
    action=""
    :on-change="handleAppTitleChange"
    :auto-upload="false"
    :show-file-list="false"
    class="uploadImage"
    ref="uploadImage">
    <img v-if="appTitleUrl.url" :src="appTitleUrl.url" class="uploadImage-avatar">
    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
//js
//上传App Title图片时（单个图片）
handleAppTitleChange(file){
    
    
    file['label']= 'appTitle';
    this.appTitleUrl.url = URL.createObjectURL(file.raw);
    this.handleImageChange(file,file.label);
},

//上传图片后对已存在的文件进行处理
handleImageChange(file, label){
    
    

  if(this.editMethodUser == 1){
    
     //为编辑状态 对已经存在的App图片进行替换处理
    var fileTypeId = _.filter(this.changeFileList,['label',label])[0].fileId; //取出改变后的file
    file['fileId'] = fileTypeId; //重新设置id
    this.removeOldImageList.push(fileTypeId); //添加已改变的文件的id

    if(_.filter(this.paramsData.files,['fileId',fileTypeId]).length > 0){
    
     //判断fileTypeId是否已存在
      this.paramsData.files.filter((v,index)=>{
    
    
        if(v.fileId == fileTypeId){
    
     //是否已存在当前fileTypeId的文件
          this.$set(this.paramsData.files,index,file); //存在则进行替换
        }
      })
    }else {
    
    
      this.paramsData.files.push(file); //fileTypeId不存在时，添加到数组
    }

  }else {
    
     //对未存在的App图片进行添加
    if(_.filter(this.paramsData.files,['label',label]).length > 0){
    
     //判断label是否已存在
      this.paramsData.files.filter((v,index)=>{
    
    
        if(v.label == label){
    
     //是否已存在当前fileTypeId的文件
          this.$set(this.paramsData.files,index,file); //存在则进行替换
        }
      })
    }else {
    
    
      this.paramsData.files.push(file); //fileTypeId不存在时，添加到数组
    }
  }

  this.removeOldImageList = [... new Set(this.removeOldImageList)];//对已修改的文件Id列表进行去重     
},

//formData
let formData = new FormData(); //以FormData形式带参
            
Object.entries(this.paramsData.files).forEach((file,i) => {
    
     //将图片文件参数转为fileList: (binary)格式
    //fileData[${i}]对应一个单独对象
    if(file[1].raw){
    
    
        if(file[1].label == 'appLogo'){
    
    
            file[1].fileDesc = new Object();
            file[1].fileDesc['title'] = this.paramsData.platform;
            file[1].fileDesc['label'] = file[1].label;
            formData.append(`fileData[${
      
      i}].fileDesc`,JSON.stringify(file[1].fileDesc));
        }else if(file[1].label == 'appImage'){
    
    
            file[1].fileDesc = new Object();
            file[1].fileDesc['label'] = file[1].label;
            formData.append(`fileData[${
      
      i}].fileDesc`,JSON.stringify(file[1].fileDesc));
        }else if(file[1].label == 'appTitle'){
    
    
            file[1].fileDesc = new Object();
            file[1].fileDesc['title'] = this.paramsData.title;
            file[1].fileDesc['label'] = file[1].label;
            formData.append(`fileData[${
      
      i}].fileDesc`,JSON.stringify(file[1].fileDesc));
        }
        formData.append(`fileData[${
      
      i}].file`,file[1].raw);
    }
});

複数の画像をアップロードするためのコード (注文要件あり) (使用される '_' は lodash への参照であり、主にデータの処理に使用されます)

//html
<el-form-item prop="imageList">
    <el-upload
        action=""
        :multiple="true"
        list-type="picture-card"
        :on-change="handleImageChange"
        :on-preview="handlePictureCardPreview"
        :on-remove="handleRemove"
        :auto-upload="false"
        :file-list="paramsData.files"
        class="uploadImage"
        ref="uploadImage">
        <div class="uploadIcon">
            <i class="el-icon-plus"></i>
            <span>上传</span>
        </div>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible" :modal-append-to-body="false">
        <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
</el-form-item>
//js
//清除已有图片
handleRemove(file, fileList) {
    
    
    this.removeOldImageList.push(file.fileId); //添加清除图片的fileId
    this.deleteFileInfo.fileIdList.push(file.fileId); //添加清除图片的fileId
    this.deleteFileInfo.orderNumList.push(file.orderNum); //添加清除图片的orderNum
    this.paramsData.files = fileList;  //重新设置回显
},
//上传图片时
handleImageChange(file, fileList){
    
    
    fileList.filter((v,index)=>{
    
    
      if(v.raw && !v.orderNum){
    
    
        if(this.deleteFileInfo.orderNumList.length > 0){
    
    
          v['orderNum'] = (this.deleteFileInfo.orderNumList[0] + 1); //给新上传的文件添加orderNum
          v['fileId'] = this.deleteFileInfo.fileIdList[0]; //给新上传的文件添加fileId
          this.deleteFileInfo.orderNumList.splice(0,1); //赋值一个就删除一个
          this.deleteFileInfo.fileIdList.splice(0,1); //赋值一个就删除一个
        }else {
    
    
          v['orderNum'] = (index + 1); //+1是为了避免orderNum为0的情况(!0为true)
          this.deleteFileInfo.orderNumList = []; //已经将所有orderNum重新添加到文件列表中需要清除为空数组
          this.deleteFileInfo.fileIdList = []; //已经将所有fileIdList重新添加到文件列表中需要清除为空数组
        }
      }
    })
	this.paramsData.files = fileList;
},

//formData
let formDatas = new FormData(); //以FormData形式带参
var newFileList = _.sortBy(_.filter(this.paramsData.files,'raw'), function(o) {
    
     return o.orderNum; }); //取出新上传的文件并按orderNum进行排序
if(this.editMethodUser == 1){
    
     //为编辑状态
   Object.entries(newFileList).forEach((file,i) => {
    
     //将图片文件参数转为fileList: (binary)格式
    formDatas.append(`fileData[${
      
      i}].file`,file[1].raw);
    formDatas.append(`fileData[${
      
      i}].orderNum`,(file[1].orderNum - 1));
  });
}else {
    
    
  Object.entries(this.paramsData.files).forEach((file,i) => {
    
     //将图片文件参数转为fileList: (binary)格式
      if(file[1].raw){
    
    
        formDatas.append(`fileData[${
      
      i}].file`,file[1].raw);
      }
  });
}

おすすめ

転載: blog.csdn.net/mrliucx/article/details/124315131
おすすめ
GitHub のホットリストに急上昇 — オープンソースのプログラミング言語とフレームワークは、どうしてこんなにも魅力的なのでしょうか?
北京ヒューマノイドロボットイノベーションセンターが、擬人化走行用の純粋な電気駆動を備えた世界初のフルサイズヒューマノイドロボット「Tiangong」を発売
ランキング
アリクラウドサーバ_ubuntu ECSシステムディスク拡張システム_
ボタンをクリックしてクリップボードにコピーします
脅威ハンティングを使用してサイバー セキュリティを強化する
ライン画像やコンテナnginxのの建設
Python での try の使用について書く
リアルタイムのデータウェアハウスを構築する方法高速データ時代、MySQLのAnalyticDBはあなたを教えて
Docker でのネットワークおよびデータ管理 (Docker Swarm クラスターおよび Docker データ管理を含む)
Java ループの比較: 従来の for ループ、拡張された for ループ、および forEach ループ
浙江大学版「C言語プログラミング（第3版）」演習2-18
Gestion du temps RTOS - Utilisation de la fonction de crochet SysTick pour réaliser l'échantillonnage de synchronisation et les sous-sections de ce chapitre
アーカイブ
もっと
2024-04-27(29)
2024-04-26(22)
2024-04-25(31)
2024-04-24(30)
2024-04-23(31)
2024-04-22(5)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)

コードワールド

© 2018 codetd.com