Explicación detallada del uso del componente de carga de imágenes de el-upload

Este componente puede implementar dos cargas:

1. Use la carga que viene con el componente, y la interfaz de carga está escrita en la acción de atributo de etiqueta;
2. Para personalizar la carga, envíe una solicitud al backend en forma de escritura de la interfaz en el método de devolución de llamada de cambio, de la siguiente manera;

 :on-change="onChangeUpload"

La carga automática con acción tiene como valor predeterminado el formato de archivo para el backend , pero necesitamos pasar una cadena en formato base64 al backend, así que usa la carga personalizada.

Varios atributos en el componente a los que se debe prestar atención :
acción : complete la interfaz de carga de imagen, si usa el método base64 para pasarlo al backend y déjelo en blanco,
al eliminar : elimine la devolución de llamada de la imagen
al cambiar : devolución de llamada de carga de imagen

el código se muestra a continuación

uploadImage(file) {
      this.file = file.raw;
      if (file.size > 16777216) {//限制文件的大小
        this.$Message.error(file.name + '大小超过16M!');
        this.file = null //超过大小将文件清空
      }else{
        //读取文件的字符流
        const reader = new FileReader();
        //将文件读取为 DataURL 以data:开头的字符串
        reader.readAsDataURL(this.file);
        reader.onload = e => {
          // 读取到的图片base64 数据编码 将此编码字符串传给后台即可
          const code = e.target.result;
          this.form.cover = code;
        }
      }
      return false;
    },

 Recuerde enviar una solicitud al backend después de obtener la cadena codificada.

Artículo de referencia:

El componente el-upload de la página vue realiza la carga de imágenes en codificación base64 - Red de letras grises (agregación de blogs de desarrollo de software)

Element el-upload image transfer base64 - Se busca programador

¿Cómo obtiene el-upload el formato base64 de la imagen cargada? Echemos un vistazo