codecamp

ElementPlus Upload 上传

Upload 上传

通过点击或者拖拽上传文件

点击上传


只能上传 jpg/png 文件,且不超过 500kb

  • food.jpeg
  • food2.jpeg

通过 slot 你可以传入自定义的上传按钮类型和文字提示。可通过设置limit和on-exceed来限制上传文件的个数和定义超出限制时的行为。可通过设置before-remove来阻止文件移除操作。

<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">点击上传</el-button>
  <template #tip>
    <div class="el-upload__tip">只能上传 jpg/png 文件,且不超过 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(
          `当前限制选择 3 个文件,本次选择了 ${files.length} 个文件,共选择了 ${
            files.length + fileList.length
          } 个文件`
        )
      },
      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('上传头像图片大小不能超过 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 属性来设置文件列表的样式。

    <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 去设置缩略图模版。

      <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">点击上传</el-button>
        <template #tip>
          <div class="el-upload__tip">只能上传 jpg/png 文件,且不超过 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>
      

      上传文件列表控制

      通过 on-change 钩子函数来对列表进行控制


      <template>
        <el-upload
        class="upload-demo"
        action="https://jsonplaceholder.typicode.com/posts/"
        :on-change="handleChange"
        :file-list="fileList"
      >
        <el-button size="small" type="primary">点击上传</el-button>
        <template #tip>
          <div class="el-upload__tip">只能上传 jpg/png 文件,且不超过 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>
      

      拖拽上传


      将文件拖到此处,或点击上传只能上传 jpg/png 文件,且不超过 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>点击上传</em></div>
          <template #tip>
            <div class="el-upload__tip">只能上传 jpg/png 文件,且不超过 500kb</div>
          </template>
        </el-upload>
        </template>
        
        

        手动上传

        只能上传 jpg/png 文件,且不超过 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"
            >上传到服务器</el-button
          >
          <template #tip>
            <div class="el-upload__tip">只能上传 jpg/png 文件,且不超过 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

        参数说明类型可选值默认值
        action必选参数,上传的地址string
        headers设置上传的请求头部object
        multiple是否支持多选文件boolean
        data上传时附带的额外参数object
        name上传的文件字段名stringfile
        with-credentials支持发送 cookie 凭证信息booleanfalse
        show-file-list是否显示已上传文件列表booleantrue
        drag是否启用拖拽上传booleanfalse
        accept接受上传的文件类型(thumbnail-mode 模式下此参数无效)string
        on-preview点击文件列表中已上传的文件时的钩子function(file)
        on-remove文件列表移除文件时的钩子function(file, fileList)
        on-success文件上传成功时的钩子function(response, file, fileList)
        on-error文件上传失败时的钩子function(err, file, fileList)
        on-progress文件上传时的钩子function(event, file, fileList)
        on-change文件状态改变时的钩子,添加文件、上传成功和上传失败时都会被调用function(file, fileList)
        before-upload上传文件之前的钩子,参数为上传的文件,若返回 false 或者返回 Promise 且被 reject,则停止上传。function(file)
        before-remove删除文件之前的钩子,参数为上传的文件和文件列表,若返回 false 或者返回 Promise 且被 reject,则停止删除。function(file, fileList)
        list-type文件列表的类型stringtext/picture/picture-cardtext
        auto-upload是否在选取文件后立即进行上传booleantrue
        file-list上传的文件列表, 例如: [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}]array[]
        http-request覆盖默认的上传行为,可以自定义上传的实现function
        disabled是否禁用booleanfalse
        limit最大允许上传个数number
        on-exceed文件超出个数限制时的钩子function(files, fileList)-

        Slot

        name说明
        trigger触发文件选择框的内容
        tip提示说明文字

        Methods

        方法名说明参数
        clearFiles清空已上传的文件列表(该方法不支持在 before-upload 中调用)
        abort取消上传请求( file: fileList 中的 file 对象 )
        submit手动上传文件列表


        ElementPlus DateTimePicker 日期时间选择器
        ElementPlus Rate 评分
        温馨提示
        下载编程狮App,免费阅读超1000+编程语言教程
        取消
        确定
        目录

        ElementPlus 配置

        关闭

        MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }