element ui upload picture usage

Through slot
You can import custom upload button types and text prompts. You can limit the number of uploaded files and define the behavior when the limit is exceeded by setting limit and on-exceed ed. You can prevent file removal by setting before remove.

  <el-button size="small" type="primary">Click upload</el-button>
  <div slot="tip" class="el-upload__tip">Upload only jpg/png Documents, and no more than 500 kb</div>
  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) {
      handleExceed(files, fileList) {
        this.$message.warning(`Currently, 3 files are limited to be selected, and this time ${files.length} Files selected ${files.length + fileList.length} Files`);
      beforeRemove(file, fileList) {
        return this.$confirm(`OK to remove ${ file.name }?`);


parameterexplaintypeOptional valueDefault value
actionRequired parameter, upload addressstring
headersSet upload request headerobject
multipleSupport multiple filesboolean
dataAdditional parameters attached when uploadingobject
nameUploaded file field namestringfile
with-credentialsSupport sending cookie credential informationbooleanfalse
show-file-listWhether to display the list of uploaded filesbooleantrue
dragEnable drag uploadbooleanfalse
acceptAccept Uploaded file type (this parameter is invalid in thumbnail mode)string
on-previewClick the hook when clicking the uploaded file in the file listfunction(file)
on-removeHook when removing files from file listfunction(file, fileList)
on-successHook when the file is uploaded successfullyfunction(response, file, fileList)
on-errorHook when file upload failsfunction(err, file, fileList)
on-progressHook when uploading filesfunction(event, file, fileList)
on-changeThe hook when the file status changes will be called when adding a file, uploading successfully and uploading failedfunction(file, fileList)
before-uploadThe hook before uploading the file. The parameter is the uploaded file. If false is returned or Promise is returned and reject ed, the upload will be stopped.function(file)
before-removeDelete the hook before the file. The parameters are uploaded files and file list. If false is returned or Promise is returned and reject ed, the deletion will be stopped.function(file, fileList)
list-typeType of file liststringtext/picture/picture-cardtext
auto-uploadWhether to upload the file immediately after selecting itbooleantrue
file-listList of uploaded files, for example: [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg '}]array[]
http-requestOverride the default upload behavior, and you can customize the implementation of uploadfunction
limitMaximum number of uploads allowednumber
on-exceedHook when the number of files exceeds the limitfunction(files, fileList)-


triggerTrigger the contents of the file selection box
tipPrompt description text


Method nameexplainparameter
clearFilesEmpty the list of uploaded files (this method does not support calling in before-upload).
abortCancel upload request(file: file object in filelist)
submitManually upload file list

Keywords: Javascript Front-end Vue UI

Added by davidp on Mon, 14 Feb 2022 14:18:45 +0200