element/examples/docs/en-US/upload.md

Upload

Upload your files by click or drag event

Click to upload files

Add slot attribute to customize the type of upload button and text hints.

:::demo

<el-upload
  action="http://jsonplaceholder.typicode.com/"
  :on-preview="handlePreview"
  :on-remove="handleRemove">
  <el-button size="small" type="primary">click to upload</el-button>
  <div class="el-upload__tip" slot="tip">only jpg/png allowed,and the size must be less than 500kb</div>
</el-upload>
<script>
  export default {
    methods: {
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      }
    }
  }
</script>

:::

Drag to upload

You can drag your file to certain field to upload it.

Specifying the type attribute as drag will change the upload control to a drag-and-drop style. Additionally, you can use the multiple attribute to control whether multiple-selections are supported or not. And on-preview and on-remove are hook functions that will be called after clicked on the uploaded file link and after clicked to remove the uploaded file, respectively.

:::demo

<el-upload
  action="http://jsonplaceholder.typicode.com/"
  type="drag"
  :multiple="true"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :on-success="handleSuccess"
  :on-error="handleError"
>
  <i class="el-icon-upload"></i>
  <div class="el-dragger__text">drag file to here or <em>click to upload</em></div>
  <div class="el-upload__tip" slot="tip">only jpg/png allowed,and the size must be less than 500kb</div>
</el-upload>
<script>
  export default {
    methods: {
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      }
    }
  }
</script>

Upload single image

This mode is specifically for uploading image, and the thumbnail will display in origin place.

thumbnail-mode attribute allows you to force the upload content to image only, and can display the thumbnail of the uploaded image.

:::demo

<el-upload
  action="http://jsonplaceholder.typicode.com/"
  type="drag"
  :thumbnail-mode="true"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
>
  <i class="el-icon-upload"></i>
  <div class="el-dragger__text">drag file to here or <em>click to upload</em></div>
  <div class="el-upload__tip" slot="tip">only jpg/png allowed,and the size must be less than 500kb</div>
</el-upload>
<script>
  export default {
    methods: {
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      }
    }
  }
</script>

:::

Attributes

Attribute	Description	Type	options	Default
action	required, the location you upload to	string	---	---
headers	optional, set request headers	object	---	---
multiple	optional, whether multiple-selections are supported or not	boolean	---	---
file	optional, The field name of the uploaded file	string	---	---
with-credentials	send cookies or not	boolean	---	---
show-uploadList	show the uploaded file list or not	boolean	---	---
type	the type of upload control	string	select, drag	select
accept	optional, limits the type of upload file, but if the upload type is drag, you can upload all the file types	string	---	---
on-preview	optional, hook function when click the uploaded files	function(file)	---	---
on-remove	optional, hook function when remove the files	function(file, fileList)	---	---
on-success	optional, hook function when upload files successfully	function(file, fileList)	---	---
on-error	optional, hook function when some errors occured	function(err, file, fileList)	---	---
before-upload	optional, hook function before upload the file, the parameter is the file that uploaded, if the hook function return false or Promise value, it will end upload progress	function(file)	---	---
thumbnail-mode	whether image mode is set or not, the image mode will display the picture thumbnails	boolean	---	false