element/examples/docs/upload.md

基础使用

点击上传

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

<el-upload action="http://element.alpha.elenet.me/upload" :on-preview="handlePreview" :on-remove="handleRemove">
  <el-button size="small" type="primary">点击上传</el-button>
  <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>

<script>
  export default {
    methods: {
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      }
    }
  }
</script>

拖拽文件上传

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

<el-upload
  action="http://element.alpha.elenet.me/upload"
  type="drag"
  :multiple="true"
  :on-preview="handlePreview"
  :on-remove="handleRemove">
  <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
<script>
  export default {
    methods: {
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      }
    }
  }
</script>

图片缩略图模式

上传文件类型限制为只能上传图片，并可展示本地缩略图，该模式暂不支持多选

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

<el-upload
  action="http://element.alpha.elenet.me/upload"
  type="drag"
  :thumbnail-mode="true"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
>
  <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
<script>
  export default {
    methods: {
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      }
    }
  }
</script>

API

参数	说明	类型	可选值	默认值
action	必选参数, 上传的地址	string
headers	可选参数, 设置上传的请求头部	object
multiple	可选参数, 是否支持多选文件	boolean
file	可选参数, 上传的文件字段名	string		file
withCredentials	支持发送 cooking 凭证信息	boolean		false
showUploadList	是否显示已上传文件列表	boolean		true
type	上传控件类型	string	select,drag	select
accept	可选参数, 接受上传的文件类型, 拖拽文件上传时不受此参数影响	string
onPreview	可选参数, 点击已上传的文件链接时的钩子	function(file)
onRemove	可选参数, 文件列表移除文件时的钩子	function(file, fileList)
beforeUpload	可选参数, 上传文件之前的钩子，参数为上传的文件，若返回 false 或者 Promise 则停止上传。	function(file)
thumbnailMode	是否设置为图片模式，该模式下会显示图片缩略图	boolean		false
type	上传控件类型	string	select,drag	select