Explicação detalhada do uso do componente de upload de imagem do el-upload

Este componente pode implementar dois uploads:

1. Use o upload que vem com o componente, e a interface de upload está escrita na ação do atributo tag;
2. Para upload personalizado, envie uma solicitação para o back-end na forma de escrever uma interface no método de retorno de chamada on-change, como segue;

 :on-change="onChangeUpload"

Carregamento automático com padrões de ação para o formato de arquivo para o back-end , mas precisamos passar uma string no formato base64 para o back-end; portanto, use o upload personalizado.

Vários atributos no componente que precisam de atenção :
action : preencha a interface de imagem de upload, se você usar o método base64 para passá-lo para o backend e deixe em branco, on-
remove : exclua o callback da imagem
on-change : callback do upload da imagem

código mostra como abaixo

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;
    },

 Lembre-se de enviar uma solicitação ao back-end após obter a string codificada.

Artigo de referência:

O componente el-upload da página vue realiza o upload de imagens na codificação base64 - Rede de letras cinza (agregação de blog de desenvolvimento de software)

Element el-upload image transfer base64 - programador procurado

Como o el-upload obtém o formato base64 da imagem carregada - vamos dar uma olhada