【画像アップロード記録3】Element-uiコンポーネントの詳細説明とパッケージ化（カスタムアップロード、ファイルサイズ制限、形式、画像サイズ）

記事ディレクトリ

フロントエンドでjpg/png/gif形式で画像をアップロードするビジネスニーズがあり、サイズは150px * 150px、300px *300px、428 428pxです*

同時に、アップロード時にユーザーの個人情報やその他の追加情報を含める必要があります。

したがって、要素のアップロードに基づいて

この要件を達成するには、アップロードする前に画像のサイズ、形式、寸法を確認する必要があります。

アップロード方法も問題になる

コンポーネントのアクションアップロードメソッドと body 属性を使用してパラメータを渡します

形式を制限するには、accept="image/jpg, image/jpeg, image/png" という文を追加します。

1-1 パッケージ化されたコンポーネントを表示する

1-1-1 親コンポーネント

              <uploadPic form-label="上传大图片" :before-load="beforeLargeUpload" :dialog-pic-visible="dialogPicVisible" :picture-large-dim="ruleForm.pictureLarge" :upload-data="uploadLargeData" @changePicUrl="changePicUrl" />
              <uploadPic form-label="上传小图片" :before-load="beforeSmallUpload" :dialog-pic-visible="dialogPicVisible" :picture-large-dim="ruleForm.pictureSmall" :upload-data="uploadLargeData" @changePicUrl="changePicUrlSmall" />



<script>
data(){
    
    
	return{
    
    
		      dialogPicVisible: false,
	}
},
methods: {
    
    
   // 上传图片接收参数
    // 大图片
    changePicUrl(resUrl) {
    
    
      this.ruleForm.pictureLarge = resUrl
    },
    // 中间图片
    changePicUrlMedium(resUrl) {
    
    
      this.ruleForm.pictureMedium = resUrl
    },
    // 小图片
    changePicUrlSmall(resUrl) {
    
    
      this.ruleForm.pictureSmall = resUrl
    },


	 // 上传大图片
    beforeLargeUpload(file) {
    
    
      // const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      let is80x56 = true
      const reader = new FileReader()
      reader.readAsDataURL(file)
      reader.onload = (theFile) => {
    
    
        const image = new Image()
        image.src = theFile.target.result
        image.onload = () => {
    
    
          const {
    
     width, height } = image
          if ((width !== 482) || (height !== 482)) {
    
    
            this.$message.error(`图片尺寸${
      
      width}*${
      
      height},请上传482*482 px 的图片！`)
            is80x56 = false
            return
          }
        }
      }

      if (!isLt2M) {
    
    
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return new Promise((resolve, reject) => {
    
    
        (isLt2M && is80x56).catch(err => {
    
    
          return err
        })
      })
    },
    // 上传中图片
    // 上传小图片
    beforeMediumUpload(file) {
    
    
      const isLt2M = file.size / 1024 / 1024 < 2

      let is300 = true
      const reader = new FileReader()
      reader.readAsDataURL(file)
      reader.onload = (theFile) => {
    
    
        const image = new Image()
        image.src = theFile.target.result
        image.onload = () => {
    
    
          const {
    
     width, height } = image
          if (width !== 150 && height !== 150) {
    
    
            this.$message.error(`图片尺寸${
      
      width}*${
      
      height},请上传 300*300 px 以下的图片！`)
            is300 = false
          }
        }
      }

      if (!isLt2M) {
    
    
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return new Promise((resolve, reject) => {
    
    
        (isLt2M && is300).catch(err => {
    
    
          return err
        })
      })
    },

}
</script>

1-1-2 サブコンポーネントのアップロード画像

<template>
  <div>
    <el-form-item :label="formLabel">
      <div style="display:flex; justify-content:space-between;">
        <el-input v-model="pictureLargeDim" placeholder="请点击上传按钮" :disabled="true" />
        <el-button type="primary" @click="dialogPicVisible = true">上传</el-button>
      </div>
      <el-dialog :title="formLabel" :visible.sync="dialogPicVisible">
        <el-upload
          class="upload-demo"
          :limit="1"
          accept="image/jpeg,image/gif,image/png"
          drag
          action="/config/upload"
          :data="uploadData"
          :before-upload="beforeLoad"
          :on-success="handleAvatarSuccess"
          :on-exceed="handleExceed"
        >
          <i class="el-icon-upload" />
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png/gif文件，且不超过2MB</div>
        </el-upload>
      </el-dialog>
    </el-form-item>
  </div>
</template>

<script>
export default {
    
    
  props: {
    
    
    pictureLargeDim: {
    
    
      type: String,
      required: true
    },
    uploadData: {
    
    
      type: Object,
      required: true
    },
    formLabel: {
    
    
      type: String,
      required: true
    },
    // 判断是大小中图片上传
    beforeLoad: {
    
    
      type: Function,
      required: true
    }
  },
  data() {
    
    
    return {
    
    
      dialogPicVisible: false
    }
  },
  methods: {
    
    
    handleAvatarSuccess(res) {
    
    
    //   this.ruleForm.pictureLarge = res.url
      this.$emit('changePicUrl', res.url)
      this.dialogPicVisible = false
      this.$message.success('上传成功')
    },
    handleExceed() {
    
    
      this.$message.warning('仅上传一张图片，删除之前的图片再进行之后的操作')
    }
  }
}
</script>

1-2 要素 el-upload アップロードコンポーネント詳細説明

アップロードアップロードはフロントエンド開発で非常に一般的な機能であり、Vue 開発で一般的に使用される Element コンポーネントライブラリにも、非常に便利なアップロードコンポーネントが提供されています。

1-2-1 基本的な使い方

コード：

<el-upload :action="uploadActionUrl">
    <el-button size="small" type="primary">点击上传</el-button>
</el-upload>

:action はアップロードアクションを実行するためのバックグラウンドインターフェイスであり、el-button はアップロードをトリガーするボタンです。

1-2-2 アップロードファイル数

- まず、同時にアップロードする複数のファイルを選択できるかどうかを設定します。これも<input type='file'>属性であり、複数のファイルを追加するだけです
- さらに、el-upload コンポーネントには、:limitアップロードできるファイルの最大数を設定する属性が用意されており、この数を超えると、選択したファイルはアップロードされなくなります。:on-exceed縛り方は数量を超えてからの対応となります。コードは以下のように表示されます。
```
<el-upload 
    :action="uploadActionUrl"
    multiple
    :limit="3"
    :on-exceed="handleExceed">
    <el-button size="small" type="primary">点击上传</el-button>
</el-upload>
```

1-2-3 アップロード形式とサイズ制限

アップロードするファイルの形式を制限する必要がある場合は、属性を追加する必要がありますaccept。これは直接<input type='file'>同じ属性です
- accept 属性の値はaccept="image/gif, image/jpeg, text/plain, application/pdf"、などになります。
- ファイル形式のヒント、スロットを使用できます。コードは以下のように表示されます:
```
<el-upload 
    :action="uploadActionUrl"
    accept="image/jpeg,image/gif,image/png"
    multiple
    :limit="3"
    :on-exceed="handleExceed">
    <el-button size="small" type="primary">点击上传</el-button>
    <div slot="tip" class="el-upload__tip">请上传图片格式文件</div>
</el-upload>
```
これはファイルを選択する際の形式を制限するためだけであることに注意してください。実際、ユーザーは「すべてのファイル」オプションをクリックして他の形式をアップロードすることができます。:before-uploadアップロード時に再度検証する必要がある場合は、対応するメソッドをこのフックにバインドして検証する必要があります。コードは次のとおりです。

<el-upload 
    :action="uploadActionUrl"
    accept="image/jpeg,image/gif,image/png"
    :before-upload="onBeforeUpload"
    multiple
    :limit="3"
    :on-exceed="handleExceed">
    <el-button size="small" type="primary">点击上传</el-button>
    <div slot="tip" class="el-upload__tip">请上传图片格式文件</div>
</el-upload>
...
    onBeforeUpload(file)
    {
      const isIMAGE = file.type === 'image/jpeg'||'image/gif'||'image/png';
      const isLt1M = file.size / 1024 / 1024 < 1;

      if (!isIMAGE) {
        this.$message.error('上传文件只能是图片格式!');
      }
      if (!isLt1M) {
        this.$message.error('上传文件大小不能超过 1MB!');
      }
      return isIMAGE && isLt1M;
    }

ここでは、ファイル形式を制限しながら、ファイルサイズも検証します。

1-2-4 アップロード時の各種フック

1-2-5 アップロードしたファイルの一覧を表示する

この機能は非常に強力であると言え、アップロードされたファイルの一覧をわかりやすく表示し、新しいファイルをアップロードするために簡単に削除することができます。
コード：

<el-upload 
    :action="uploadActionUrl"
    accept="image/jpeg,image/gif,image/png"
    multiple
    :limit="3"
    :on-exceed="handleExceed"    
    :on-error="uploadError"
    :on-success="uploadSuccess"
    :on-remove="onRemoveTxt"
    :before-upload="onBeforeUpload"
    :file-list="files">
    <el-button size="small" type="primary">点击上传</el-button>
    <div slot="tip" class="el-upload__tip">请上传图片格式文件</div>
</el-upload>

実装方法は、:file-list="files"この属性を追加することです。ここで、files はバインドされた配列オブジェクトであり、最初は空です。

1-2-6 アップロード時にデータを提出する

ファイルをアップロードする際には、同時にバックグラウンドインターフェースにデータを送信する必要があり、その際に :data 属性を使用します。

<el-upload 
    :action="uploadActionUrl"
    accept="image/jpeg,image/gif,image/png"
    multiple
    :limit="3"
    :data="uploadData"
    :on-exceed="handleExceed"    
    :on-error="uploadError"
    :on-success="uploadSuccess"
    :on-remove="onRemoveTxt"
    :before-upload="onBeforeUpload"
    :file-list="files">
    <el-button size="small" type="primary">点击上传</el-button>
    <div slot="tip" class="el-upload__tip">请上传图片格式文件</div>
</el-upload>
...
uploadData: {
    dataType: "0",
    oldFilePath:""
}

1-2-6 選択とアップロードは別々に処理されます

場合によっては、選択を処理して個別にアップロードする必要がある場合があります。たとえば、写真をアップロードする場合、最初にファイルを選択してフロントエンドに送信し、写真の処理後に Base64 コンテンツをバックグラウンドに送信します。

<el-upload
  action=""
  accept="image/jpeg,image/gif,image/png"
  :on-change="onUploadChange"
  :auto-upload="false"
  :show-file-list="false">
    <el-button slot="trigger" size="small" type="primary">选取</el-button>
    <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传</el-button>
</el-upload>
...
  submitUpload()
  {
    console.log("submit")
  },
  onUploadChange(file)
  {
    const isIMAGE = (file.raw.type === 'image/jpeg' || file.raw.type === 'image/png'|| file.raw.type === 'image/gif');
    const isLt1M = file.size / 1024 / 1024 < 1;

    if (!isIMAGE) {
      this.$message.error('上传文件只能是图片格式!');
      return false;
    }
    if (!isLt1M) {
      this.$message.error('上传文件大小不能超过 1MB!');
      return false;
    }
    var reader = new FileReader();
    reader.readAsDataURL(file.raw);
    reader.onload = function(e){
        console.log(this.result)//图片的base64数据
    }
  }

ここに画像の説明を挿入

参考記事：https://blog.csdn.net/qq_41800366/article/details/113309320

https://blog.csdn.net/qq_58340302/article/details/125939912

【画像アップロード記録3】Element-uiコンポーネントの詳細説明とパッケージ化（カスタムアップロード、ファイルサイズ制限、形式、画像サイズ）

記事ディレクトリ

1-1 パッケージ化されたコンポーネントを表示する

1-1-1 親コンポーネント

1-1-2 サブコンポーネントのアップロード画像

1-2 要素 el-upload アップロードコンポーネント詳細説明

1-2-1 基本的な使い方

1-2-2 アップロードファイル数

1-2-3 アップロード形式とサイズ制限

1-2-4 アップロード時の各種フック

1-2-5 アップロードしたファイルの一覧を表示する

1-2-6 アップロード時にデータを提出する

1-2-6 選択とアップロードは別々に処理されます

おすすめ