Olá, preciso criar um botão de alterar imagem após o upload da mesma. Alguma ideia ? Segue o código:

<script type="text/javascript"> // FUNÇÃO PARA MOSTRAR IMAGEM.

function mostraImagem() {

    var preview = document.querySelector('img'); //selects the query named img
    var file = document.querySelector('input[type=file]').files[0]; //sames as here
    var reader = new FileReader();

    reader.onloadend = function() {
        preview.src = reader.result;
    }

    if (file) {
        reader.readAsDataURL(file); //reads the data as a URL
    } else {
        preview.src = "";
    }

}
// FIM FUNÇÃO PARA MOSTRAR IMAGEM.

// INÍCIO FUNÇÃO JQUERY PARA ALTERAR IMAGEM.
function trocarImagem() {
    $("button").click(function() {

            }
            // FIM FUNÇÃO JQUERY PARA ALTERAR IMAGEM.

<title> Atualizar Imagem </title>

Selecione a Imagem

<input id="arquivo" type="file" onchange="mostraImagem()" />

<br>
<br>

<img id="arquivo" src="arquivo" alt="your image" width="132" height="100" />

<br>
<br>

<button> Alterar Imagem</button>

Oii Vittorio, tudo bem??

Tem alguns probleminhas no seu código, como o uso do FileReader, e também começou com javascript puro e depois não precisava usar o jquery.

Eu reescrevi ele todo, e consegui fazer funcionar desta maneira. Não necessariamente precisa ser com o click do botão, fiz com o evento submit do formulario, porém está facil mudar pra click do botão caso preferir.

Coloquei alguns comentários no código pra te ajudar e também publiquei ele aqui: https://codepen.io/vanessametonini/pen/zLmzNY

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Atualizar a imagem</title>
</head>
<body>

    <h1>Atualizar a imagem</h1>

    <form class="upload-imagem">
        <input type="file" class="upload">
        <button>Alterar Imagem</button>
    </form>

    <div>
        <img class="imagem" src="http://via.placeholder.com/350x150" alt="Sua imagem" width="350" height="150">
    </div>

<script>
    //IIFE Immediately Invoked Function Expression
    ;(function(){

        //Pega os elementos da tela e declara como constantes
        const leitorDeArquivos = new FileReader(),
              formulario = document.querySelector('.upload-imagem'),
              previaDaImagem = document.querySelector('.imagem'),
              inputArquivo = document.querySelector('.upload');

        //Quando o formulário for enviado:
        formulario.addEventListener('submit', function(submit){
            //empede o recarregamento da página
            submit.preventDefault();

            //pega o arquivo enviado e guarda nesta variavel
            let imagemEnviada = inputArquivo.files[0];

            //Usa a função do objeto leitor de arquivos, que lê o arquivo, e consegue reaproveita-lo para usar o arquivo como uma URL
            leitorDeArquivos.readAsDataURL(imagemEnviada);

            //Após leitura da imagem (evento load), a função de callback define o valor do src da imagem de prévia com o valor do resultado da leitura do leitor de arquivos
            leitorDeArquivos.addEventListener('loadend', function(load){

                //veja no console o que o resultado do leitor de arquivos :)
                console.log(load.target.result);

                previaDaImagem.src = load.target.result
            })

        })

    })()
</script>
</body>
</html>

Veja se te ajuda!

bons estudos