複数の写真やファイルをアップロードするel-upload機能を実装

要素内のコンポーネントに使用して変更する方法で、大まかな方法​​はほぼ同じですが、コードの書き方は以下の2通りがあります。

1) インターフェイスは HTML で直接記述されます。

<el-col :span="12"> 
            <el-form-item label="付属品" prop="attachments" :rules="[]"> 
              <el-upload 
                class="upload-demo" 
                ref="アップロード" 
                multiple 
                :action="`${urlapi}v1/common/base/upload`" //接口
                :limit="limit" 
                :file-list="fileList" 
                :on-success="onSuccess" 
              > 
                <el-button slot="trigger" size="small" type="primary" 
                  > 选取文件</el-button 
                > 
              </el-upload> 
            </el-form-item> 
          </el-col>

変数
データを定義します:{ 
 limit: 2, //アップロードされるファイルの数を制限します
      アクセサリ: [] 
} 
 //作成されたドメイン名
() { 
    this.urlapi = process.env.VUE_APP_SERVER_URL 
  }, 
//
 ファイルのアップロードは成功しました
    onSuccess ( res) { 
      const info = res.data 
      this.accessory.push(info) // info の値を変数アクセサリに代入します
      if (this.accessory.length === this.limit) { 
        const fileList = this.accessory. join( ',') // 渡された文字型を確認する
        this.inputForm.attachments = fileList 
      } 
    },

2) Base64メソッドのアップロード

<el-upload 
            :http-request="uploadImg" 
            :show-file-list="false" 
            class="avatar-uploader" 
            action="" 
            accept="image/jpg, image/jpeg, image/png" 
          > 
            < el-image 
              v-if="form.image" 
              :src="`${baseUrl}/common/viewImage?imagepath=${form.imageimage}`" 
              class="avatar" 
              fit="contain" 
            > 
              <template #error> 
                <div class="image-slot"> 
                  <i class="el-icon-picture-outline"/> 
                </div> 
              < /テンプレート> 
            </el-image>
            <i v-else class="el-icon-plus avatar-uploader-icon"/> 
          </el-upload>
          

   // 画像转换base64 
    getBase64Image (file) { 
      const Promise = new Promise((resolve,拒否) => { 
        const Reader = new FileReader() 
        Reader.readAsDataURL(file) 
        Reader.onload = function (e) { 
          solve(e) 
        } 
      }) 
return
      Promise 
    }, 
    
async UploadImg (res) { 
      const { file } = res 
      const PicBase = await this.getBase64Image(file) 
      try { 
        const obj = await this.addUpload(PicBase.target.result) 
        this.inputForm。 covePic = obj.fileUrl 
      } catch (エラー) { 
        console.log(error) 
      } 
    },
    
      // 画像をアップロードするインターフェース
    addUpload (file) { 
      this.$http({ 
        url: `/v1/common/base/upload`, 
        method: 'post', 
        data: { file } //パラメータを渡す
      }).then(( ( { data }) => { 
        this.inputForm.covePic = data.cover 
      }) 
    }、
    
    または 2 つのうちの 1 つを選択します
        // 2. 画像のアップロード インターフェース
    addUpload () { 
     let file =this.inputElem.covePic; / /ファイル情報の取得
      let data = new FormData(); //インスタンスオブジェクトの構築
       data.append("file", file); //オブジェクトインスタンスのインスタンス化
      this.$http({ 
        url: `/v1/common/base/upload` 、
        メソッド: 'post', 
        data: { data } //パラメータを渡す
      }).then(({ data }) => { 
        this.inputForm.covePic = data.cover 
      }) 
    } 
,

やっと

読んでいただきありがとうございます。不備がございましたら、お気軽にコメント欄でご相談ください。