El tamaño del archivo se obtiene mediante file.size y se expresa en bytes.

Propiedades relevantes del componente:

• action: URL destino de la carga (obligatoria).
• data: parámetros adicionales enviados junto al archivo.
• name: nombre del campo que identifica al archivo.
• drag: activa la carga por arrastre.
• accept: filtra los tipos de archivo permitidos, por ejemplo accept="image/png, image/jpeg".

Configuración de datos del componente:

data() {
  return {
    previewUrl: "",
    extraParams: {
      authToken: sessionStorage.getItem("loginToken"),
      username: ""
    }
  };
}

Ejemplo de plantilla con http-request personalizado:

<el-upload
  class="uploader-wrapper"
  action="#"
  :on-preview="onPreviewClick"
  :on-remove="onFileRemoved"
  :before-remove="confirmRemoval"
  multiple
  :limit="3"
  :on-exceed="onLimitExceeded"
  :http-request="submitToApi"
  :file-list="documents"
>
  <el-button size="small" type="primary">Seleccionar archivos</el-button>
  <div slot="tip" class="upload-hint">Formatos admitidos: jpg/png. Máximo 500KB.</div>
</el-upload>

Métodos asociados:

onFileRemoved(file, list) {
  console.log(file, list);
},
onPreviewClick(file) {
  console.log(file);
},
onLimitExceeded(files, list) {
  this.$message.warning(
    `Máximo 3 archivos. Seleccionaste ${files.length}, total: ${files.length + list.length}`
  );
},
confirmRemoval(file, list) {
  return this.$confirm(`¿Eliminar ${file.name}?`);
}

El núcleo del funcionamiento reside en el método vinculado a http-request, que reemplaza el comportamiento de carga por defecto:

submitToApi(file) {
  const payload = new FormData();
  payload.append("file", file.file);
  payload.append("user_id", 18);

  this.$http
    .post(
      "https://api.example.com/v1/user/avatar",
      payload
    )
    .then(res => {
      if (res.data.status === 1) {
        this.$message.success(res.data.msg);
      } else {
        this.$message.error(res.msg || "Error en la operación");
      }
    });
}

Carga en modo binario

Para realizar la carga en formato binario, se debe incluir la cabecera Content-Type: multipart/form-data en la petición y construir el cuerpo con FormData:

submitToApi(file) {
  const payload = new FormData();
  payload.append("file", file.file);
  payload.append("user_id", 18);

  const config = {
    headers: {
      "Content-Type": "multipart/form-data"
    }
  };

  this.$http
    .post("https://api.example.com/v1/user/avatar", payload, config)
    .then(res => {
      // manejar respuesta
    });
}