ElementPlus Upload 上傳

2021-09-24 20:18 更新

Upload 上傳

通過(guò)點(diǎn)擊或者拖拽上傳文件

點(diǎn)擊上傳


只能上傳 jpg/png 文件,且不超過(guò) 500kb

  • food.jpeg
  • food2.jpeg

通過(guò) slot 你可以傳入自定義的上傳按鈕類型和文字提示??赏ㄟ^(guò)設(shè)置limit和on-exceed來(lái)限制上傳文件的個(gè)數(shù)和定義超出限制時(shí)的行為。可通過(guò)設(shè)置before-remove來(lái)阻止文件移除操作。

<template>
  <el-upload
  class="upload-demo"
  action="https://jsonplaceholder.typicode.com/posts/"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :before-remove="beforeRemove"
  multiple
  :limit="3"
  :on-exceed="handleExceed"
  :file-list="fileList"
>
  <el-button size="small" type="primary">點(diǎn)擊上傳</el-button>
  <template #tip>
    <div class="el-upload__tip">只能上傳 jpg/png 文件,且不超過(guò) 500kb</div>
  </template>
</el-upload>
</template>

<script>
  export default {
    data() {
      return {
        fileList: [
          {
            name: 'food.jpeg',
            url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
          },
          {
            name: 'food2.jpeg',
            url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
          },
        ],
      }
    },
    methods: {
      handleRemove(file, fileList) {
        console.log(file, fileList)
      },
      handlePreview(file) {
        console.log(file)
      },
      handleExceed(files, fileList) {
        this.$message.warning(
          `當(dāng)前限制選擇 3 個(gè)文件,本次選擇了 ${files.length} 個(gè)文件,共選擇了 ${
            files.length + fileList.length
          } 個(gè)文件`
        )
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`確定移除 ${file.name}?`)
      },
    },
  }
</script>

用戶頭像上傳


使用 before-upload 限制用戶上傳的圖片格式和大小。

<template>
  <el-upload
  class="avatar-uploader"
  action="https://jsonplaceholder.typicode.com/posts/"
  :show-file-list="false"
  :on-success="handleAvatarSuccess"
  :before-upload="beforeAvatarUpload"
>
  <img v-if="imageUrl" :src="imageUrl" class="avatar" />
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</template>

<script>
  export default {
    data() {
      return {
        imageUrl: '',
      }
    },
    methods: {
      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw)
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg'
        const isLt2M = file.size / 1024 / 1024 < 2

        if (!isJPG) {
          this.$message.error('上傳頭像圖片只能是 JPG 格式!')
        }
        if (!isLt2M) {
          this.$message.error('上傳頭像圖片大小不能超過(guò) 2MB!')
        }
        return isJPG && isLt2M
      },
    },
  }
</script>
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>

照片墻


使用 list-type 屬性來(lái)設(shè)置文件列表的樣式。

    <template>
      <el-upload
      action="https://jsonplaceholder.typicode.com/posts/"
      list-type="picture-card"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove"
    >
      <i class="el-icon-plus"></i>
    </el-upload>
    <el-dialog v-model="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
    </template>
    
    <script>
      export default {
        data() {
          return {
            dialogImageUrl: '',
            dialogVisible: false,
          }
        },
        methods: {
          handleRemove(file, fileList) {
            console.log(file, fileList)
          },
          handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url
            this.dialogVisible = true
          },
        },
      }
    </script>
    

    文件縮略圖


    使用 scoped-slot 去設(shè)置縮略圖模版。

      <template>
        <el-upload action="#" list-type="picture-card" :auto-upload="false">
        <template #default>
          <i class="el-icon-plus"></i>
        </template>
        <template #file="{file}">
          <div>
            <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
            <span class="el-upload-list__item-actions">
              <span
                class="el-upload-list__item-preview"
                @click="handlePictureCardPreview(file)"
              >
                <i class="el-icon-zoom-in"></i>
              </span>
              <span
                v-if="!disabled"
                class="el-upload-list__item-delete"
                @click="handleDownload(file)"
              >
                <i class="el-icon-download"></i>
              </span>
              <span
                v-if="!disabled"
                class="el-upload-list__item-delete"
                @click="handleRemove(file)"
              >
                <i class="el-icon-delete"></i>
              </span>
            </span>
          </div>
        </template>
      </el-upload>
      <el-dialog v-model="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="" />
      </el-dialog>
      </template>
      
      <script>
        export default {
          data() {
            return {
              dialogImageUrl: '',
              dialogVisible: false,
              disabled: false,
            }
          },
          methods: {
            handleRemove(file) {
              console.log(file)
            },
            handlePictureCardPreview(file) {
              this.dialogImageUrl = file.url
              this.dialogVisible = true
            },
            handleDownload(file) {
              console.log(file)
            },
          },
        }
      </script>
      

      圖片列表縮略圖


      <template>
        <el-upload
        class="upload-demo"
        action="https://jsonplaceholder.typicode.com/posts/"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :file-list="fileList"
        list-type="picture"
      >
        <el-button size="small" type="primary">點(diǎn)擊上傳</el-button>
        <template #tip>
          <div class="el-upload__tip">只能上傳 jpg/png 文件,且不超過(guò) 500kb</div>
        </template>
      </el-upload>
      </template>
      
      <script>
        export default {
          data() {
            return {
              fileList: [
                {
                  name: 'food.jpeg',
                  url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
                },
                {
                  name: 'food2.jpeg',
                  url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
                },
              ],
            }
          },
          methods: {
            handleRemove(file, fileList) {
              console.log(file, fileList)
            },
            handlePreview(file) {
              console.log(file)
            },
          },
        }
      </script>
      

      上傳文件列表控制

      通過(guò) on-change 鉤子函數(shù)來(lái)對(duì)列表進(jìn)行控制


      <template>
        <el-upload
        class="upload-demo"
        action="https://jsonplaceholder.typicode.com/posts/"
        :on-change="handleChange"
        :file-list="fileList"
      >
        <el-button size="small" type="primary">點(diǎn)擊上傳</el-button>
        <template #tip>
          <div class="el-upload__tip">只能上傳 jpg/png 文件,且不超過(guò) 500kb</div>
        </template>
      </el-upload>
      </template>
      
      <script>
        export default {
          data() {
            return {
              fileList: [
                {
                  name: 'food.jpeg',
                  url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
                },
                {
                  name: 'food2.jpeg',
                  url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
                },
              ],
            }
          },
          methods: {
            handleChange(file, fileList) {
              this.fileList = fileList.slice(-3)
            },
          },
        }
      </script>
      

      拖拽上傳


      將文件拖到此處,或點(diǎn)擊上傳只能上傳 jpg/png 文件,且不超過(guò) 500kb

        <template>
          <el-upload
          class="upload-demo"
          drag
          action="https://jsonplaceholder.typicode.com/posts/"
          multiple
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">將文件拖到此處,或<em>點(diǎn)擊上傳</em></div>
          <template #tip>
            <div class="el-upload__tip">只能上傳 jpg/png 文件,且不超過(guò) 500kb</div>
          </template>
        </el-upload>
        </template>
        
        

        手動(dòng)上傳

        只能上傳 jpg/png 文件,且不超過(guò) 500kb

        • food.jpeg
        • food2.jpeg
        <template>
          <el-upload
          class="upload-demo"
          ref="upload"
          action="https://jsonplaceholder.typicode.com/posts/"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :file-list="fileList"
          :auto-upload="false"
        >
          <template #trigger>
            <el-button size="small" type="primary">選取文件</el-button>
          </template>
          <el-button
            style="margin-left: 10px;"
            size="small"
            type="success"
            @click="submitUpload"
            >上傳到服務(wù)器</el-button
          >
          <template #tip>
            <div class="el-upload__tip">只能上傳 jpg/png 文件,且不超過(guò) 500kb</div>
          </template>
        </el-upload>
        </template>
        
        <script>
          export default {
            data() {
              return {
                fileList: [
                  {
                    name: 'food.jpeg',
                    url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
                  },
                  {
                    name: 'food2.jpeg',
                    url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
                  },
                ],
              }
            },
            methods: {
              submitUpload() {
                this.$refs.upload.submit()
              },
              handleRemove(file, fileList) {
                console.log(file, fileList)
              },
              handlePreview(file) {
                console.log(file)
              },
            },
          }
        </script>

        Attribute

        參數(shù)說(shuō)明類型可選值默認(rèn)值
        action必選參數(shù),上傳的地址string
        headers設(shè)置上傳的請(qǐng)求頭部object
        multiple是否支持多選文件boolean
        data上傳時(shí)附帶的額外參數(shù)object
        name上傳的文件字段名stringfile
        with-credentials支持發(fā)送 cookie 憑證信息booleanfalse
        show-file-list是否顯示已上傳文件列表booleantrue
        drag是否啟用拖拽上傳booleanfalse
        accept接受上傳的文件類型(thumbnail-mode 模式下此參數(shù)無(wú)效)string
        on-preview點(diǎn)擊文件列表中已上傳的文件時(shí)的鉤子function(file)
        on-remove文件列表移除文件時(shí)的鉤子function(file, fileList)
        on-success文件上傳成功時(shí)的鉤子function(response, file, fileList)
        on-error文件上傳失敗時(shí)的鉤子function(err, file, fileList)
        on-progress文件上傳時(shí)的鉤子function(event, file, fileList)
        on-change文件狀態(tài)改變時(shí)的鉤子,添加文件、上傳成功和上傳失敗時(shí)都會(huì)被調(diào)用function(file, fileList)
        before-upload上傳文件之前的鉤子,參數(shù)為上傳的文件,若返回 false 或者返回 Promise 且被 reject,則停止上傳。function(file)
        before-remove刪除文件之前的鉤子,參數(shù)為上傳的文件和文件列表,若返回 false 或者返回 Promise 且被 reject,則停止刪除。function(file, fileList)
        list-type文件列表的類型stringtext/picture/picture-cardtext
        auto-upload是否在選取文件后立即進(jìn)行上傳booleantrue
        file-list上傳的文件列表, 例如: [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}]array[]
        http-request覆蓋默認(rèn)的上傳行為,可以自定義上傳的實(shí)現(xiàn)function
        disabled是否禁用booleanfalse
        limit最大允許上傳個(gè)數(shù)number
        on-exceed文件超出個(gè)數(shù)限制時(shí)的鉤子function(files, fileList)-

        Slot

        name說(shuō)明
        trigger觸發(fā)文件選擇框的內(nèi)容
        tip提示說(shuō)明文字

        Methods

        方法名說(shuō)明參數(shù)
        clearFiles清空已上傳的文件列表(該方法不支持在 before-upload 中調(diào)用)
        abort取消上傳請(qǐng)求( file: fileList 中的 file 對(duì)象 )
        submit手動(dòng)上傳文件列表


        以上內(nèi)容是否對(duì)您有幫助:
        在線筆記
        App下載
        App下載

        掃描二維碼

        下載編程獅App

        公眾號(hào)
        微信公眾號(hào)

        編程獅公眾號(hào)