1.1 機能説明

以前のプロジェクト要件では、要素 ui コンポーネントで el-upload を使用して画像をアップロードしていました。インターフェイスに存在できる画像は 1 つだけであるため、画像が正常にアップロードされた後は、アップロードボタンを非表示にする必要があります。

2.1 主なテストポイント

2.1.1 コンポーネントの使用

el-upload elment-ui コンポーネントのアップロード

2.2.1 基本的な考え方

アップロード処理を詳しく説明すると、
① アップロードする前に、アップロードインターフェースのアドレスを記述し、アクションを入力しますヘッダー認証を要求する必要がある場合は、ヘッダーを使用します。
②アップロード時、limitで毎回アップロードできるファイルの最大数を制限し、on-successでアップロードインターフェースアドレスから返される画像URLアドレスをキャプチャし、フロントエンドが保存します。
③アップロード後、動的クラススタイルを使用してアップロードボタンを非表示にします。
④削除時、削除時に使用して、フロントエンドに以前に保存された画像URLをクリアし、同時に動的クラススタイルを通じてアップロードボタンを表示します。手順①は再度実行できます。

次に、el-upload でアップロードされた画像を確認し、コンポーネント ( elment-ui のアップロードコンポーネントの説明)の下にある特定の属性を知る必要があります。このアップロードで使用されるパラメータは次のとおりです。

:limit : アップロードできるファイルの最大数 (アップロードごとに 1 つの画像のみ選択できます)。
:on-exceed : アップロードファイル数が制限を超えた場合に実行されるフック関数（1つの画像を複数の操作でアップロードした場合に実行される関数）
:class : 動的クラススタイル (画像のアップロードが成功した後にアップロードボタンを制御するために使用されます)
:action : バックエンドによって提供される画像をアップロードするためのインターフェイスを保存するために使用されます (一般的に、バックエンドは画像をアップロードするためのインターフェイスを提供します。画像データがバックエンドに送信されると、バックエンドはフロントエンドに次のクラウドストレージアドレスを与えます)絵）
:file-list : アップロードされたファイルのリスト (配列形式) (画像をアップロードする場合、画像はこの属性で定義されたリストの下に保存されます)
:headers : アップロード時のリクエストヘッダーを設定します。オブジェクト形式（インターフェースをアップロードする際、リクエストヘッダーにトークン認可情報を入れる必要があります。ここにリクエストヘッダーを記述します）
list-type : ファイルリストのタイプ
:on-success : 画像が正常にアップロードされたときに実行される関数 (バックエンドから返された画像クラウドストレージアドレスをキャプチャするために使用され、後でフォームを送信するときにこの URL アドレスをバックエンドにアップロードできるようになります)
:on-remove : ファイルリストからファイルを削除するためのフック (アップロードされた画像イベントが削除されると、以前にキャプチャされた URL 画像アドレスはクリアされます)

3.1 あなたが踏んだ穴

質問 1: 動的クラススタイルを使用してアップロードボタンを表示または非表示にするにはどうすればよいですか?
回答 1: noneBtnDealImg 変数が判定に使用されます

:class="noneBtnDealImg ? 'disUoloadSty':''"

data に変数を書き込みます。noneBtnDealImg は true または false で、el-upload が存在するかどうかを制御します。 disUoloadSty クラス名

CSSに深度セレクターを記述し、クラス名disUoloadStyがある場合はアップロードボタンを非表示にします。

/deep/ .disUoloadSty .el-upload--picture-card{
    
    
  display:none;   /* 上传按钮隐藏 */
}

エントリポイントは、アップロードが成功すると非表示になり、削除されると表示されることです。すると、
①成功時は、file-list ファイルリストの長さが 1 であるかどうかを判定するために書き込みます。
1の場合、noneBtnDealImgがtrueに設定されますこのとき、el-uploadはdisUoloadStyというクラス名を持ち、csssで隠しボタンスタイルを実行します。

②on-removeでは、file-listファイルリストの長さが1であるかどうかを判定するために書き込みます。
1 以外の場合は noneBtnDealImg が false に設定されますが、このとき el-upload には disUoloadSty クラス名が存在しないため、csss の隠しボタンスタイルは実行されません。

質問 2: el-upload の :headr をリクエストヘッダーオブジェクトに配置するにはどうすればよいですか?
回答 2: :header で変数を定義し、その変数をデータに設定し、リクエストヘッダーのオブジェクトをデータに設定できます。

4.1 対応するフレームワークまたは言語

言語: html、js、css
フレームワーク: elemnet-ui、vue 2.0

5.1 関連コード

<template>
  <div class="stylebg">
    <h3>背景宣传图</h3>
    <el-upload
      :limit="1"
      :on-exceed="(files, fileList)=>handleExceed(files, fileList, 1)"
      class="avatar-uploader"
      :class="noneBtnDealImg ? 'disUoloadSty':''"
      :action="uploadfileurl"
      :file-list="fileList"
      :headers="headerObj"
      style="padding:30px 0 ;"
      list-type="picture-card"
      :on-success="(res, file, fileList)=>handleAvatarSuccess(res, file, fileList,'img')"
      name="image"
      :on-remove="(file,fileList)=>handleRemove(file,fileList,'img')">
      <i class="el-icon-plus" ></i>
    </el-upload>
    <el-button @click="toUpDate" type="primary">提 交</el-button>
  </div>
</template>

<script>
import {
    
    getBGAPI,setBGAPI} from "@/api/homePageManage.js"
export default {
    
    
  data(){
    
    
    return{
    
    
      fileList:[],
      headerObj: {
    
    
        authorization: localStorage.getItem('token')
      },
      img:'',
      noneBtnDealImg:false,
      uploadfileurl:this.uploadFileURL,
    }
  },
  created(){
    
    
    this.getBG()
  },
  methods:{
    
    

    handleExceed(files, fileList, num) {
    
    
      this.$message.warning(`当前限制选择 ${
      
      num} 个文件，本次选择了 ${
      
      files.length} 个文件，共选择了 ${
      
      files.length + fileList.length} 个文件`);
    },

    // 图片上传
    handleAvatarSuccess(res,file,fileList,name) {
    
    
      this.img = res.data.path2[0]
      this.noneBtnDealImg = fileList.length >= 1
    },

    //图片删除
    handleRemove(file,fileList,name) {
    
    
      this.img = ''
      this.noneBtnDealImg = fileList.length >= 1
    },

    //获取背景宣传图
    getBG(){
    
    
      this.fileList = []
      getBGAPI().then(res => {
    
    
        console.log(res.img)
        this.fileList.push({
    
    'url':res.img})
        this.noneBtnDealImg = this.fileList.length >= 1
        this.img = res.img
      })
    },

    //提交背景宣传图
    toUpDate(){
    
    
      setBGAPI({
    
    
        img: this.img
      }).then(res => {
    
    
        this.$message.success('设置成功')
        this.getBG()
      })
    }
  }
}
</script>

<style lang="less" scoped>

/deep/ .crsBanner {
    
    
    .el-form-item__label::after {
    
    
      content: '(最多1张)';
      display: block;
      font-size: 12px;
      color: #999;
      line-height: 12px;
    }
  }

/deep/ .allUpload {
    
    
    .el-form-item__content{
    
    
      // flex: none !important;
      display: flex;
    }
  }

/deep/ .el-upload-list__item{
    
    
  transition: none !important
}

/deep/ .disUoloadSty .el-upload--picture-card{
    
    
  display:none;   /* 上传按钮隐藏 */
}

/deep/ .el-upload-list__item{
    
    
  width:300px;
  height:300px;
}

</style>

6.1 スクリーンショットの実行

ここに画像の説明を挿入

画像をアップロードするための要素 ui を実装する