Diseño de página

<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span>更换头像</span>
    </div>
    <!-- 卡片的内容区 -->
    <img src="@/assets/images/avatar.jpg" alt="" />
    <div class="mybtn">
      <!-- 两个按钮 -->
      <el-button type="primary" icon="el-icon-plus">选择图片</el-button>
      <el-button type="success" disabled icon="el-icon-cloudy">上传头像</el-button>
    </div>
  </el-card>
</template>

<script>
export default {}
</script>

<style lang="less" scoped>
.mybtn {
  margin-top: 10px;
}
</style>

Vista previa de la imagen local

Busque el campo de archivo (cuadro de selección de archivo) ----<Input type="file" />
input.filesIndica la lista de archivos seleccionados
input.files.lengthIndica cuántas imágenes se seleccionan
input.files[0]Un objeto de archivo .

Use el objeto URL para la vista previa

De acuerdo con el objeto del archivo, se obtiene una dirección URL temporal

let url = URL.createObjectURL(文件对象)

Establezca el src de la imagen como una dirección URL temporal

img.src = url

Cambiar avatar

Haga clic en el botón para seleccionar la imagen

Si desea seleccionar una imagen, debe haber una <input @click="clickFile" type="file" ref="file" >, así que agregue este cuadro de selección de archivos a la página.

Haga clic en "Al seleccionar una imagen, configure el evento de clic":

clickFile() {
  // 点击选择图片，触发文件域的单击事件
  this.$refs.file.click()
}

El contenido del campo de archivo cambia, creando una cadena base64

Primero agregue un evento de cambio al campo de archivo:@change="fileChange"

Método de procesamiento correspondiente:

fileChange(e) {
  if (e.target.files.length > 0) {
    // 选择了图片，设置url=base64
    const fileObj = e.target.files[0] // ======== 文件对象
    const fr = new FileReader()
    fr.readAsDataURL(fileObj)
    // 这里必须使用箭头函数
    fr.onload = () => {
      this.url = fr.result // 把得到的base64字符串，赋值给数据项中的url
    }
  } else {
    this.url = '' // 没有选择图片，恢复url=''
  }
}

El método anterior almacena la cadena base64 generada en la URL del elemento de datos, por lo que se requiere el elemento de datos:

data() {
  return {
    url: '' // 准备存放base64格式的字符串
  }
}

Vista previa de la imagen

Configure la imagen de vista previa según la presencia o ausencia de la url:

<el-button type="success" :disabled="url ? false : true" icon="el-icon-cloudy" @click="upload">
  上传头像
</el-button>

cargar imagen

Según la presencia o ausencia de url, configure la desactivación del botón de carga:

<el-button type="success" :disabled="url ? false : true" icon="el-icon-cloudy" @click="upload">
  上传头像
</el-button>

A continuación, encapsule la importación del método API

En el componente, agregue un evento al botón de carga: @click="upload"y el método correspondiente es el siguiente:

async upload() {
  // 上传方法
  const { data: res } = await uploadAPI(this.url)
  if (res.code === 0) {
    this.$message.success(res.message)
    // 更新更改，调用 vuex 中的 actions 中的 getUser 方法，重新获取用户数据即可
    this.$store.dispatch('user/getUser')
  } else {
    this.$message.error(res.message)
  }
}

Cambiar vista previa de avatar y cargar