Implementar elemento ui para subir una imagen

1.1 Descripción funcional

Los requisitos del proyecto anterior usarían el-upload en el componente ui del elemento para cargar una imagen. Debido a que solo puede existir una imagen en la interfaz, después de que una imagen se carga correctamente, el botón de carga debe ocultarse.

2.1 Principales puntos de prueba

2.1.1 Uso de componentes

el-upload carga del componente elment-ui

2.2.1 Idea básica

Describamos el proceso de carga en detalle:
① Antes de cargar, primero escriba la dirección de la interfaz de carga e ingrese la acción. Si necesita solicitar la autenticación de encabezado, use encabezados.
②Al cargar, el límite limitará la cantidad máxima de archivos cargados cada vez y, en caso de éxito, capturará la dirección URL de la imagen devuelta por la dirección de la interfaz de carga, y el front-end la guardará.
③Después de cargar, use el estilo de clase dinámica para ocultar el botón de carga
④Eliminar, al eliminar se usa para borrar la URL de la imagen previamente guardada en la interfaz y, al mismo tiempo, mostrar el botón de carga nuevamente a través del estilo de clase dinámica. El paso ① se puede realizar de nuevo.

Luego miramos las imágenes cargadas por el-upload, y necesitamos conocer los atributos específicos debajo del componente ( la descripción del componente de carga de elment-ui ). Los parámetros utilizados en esta carga son los siguientes:

• :limit : El número máximo de archivos que se pueden cargar (solo se puede seleccionar una imagen para cada carga).
• :on-exceed: la función de gancho que se ejecutará cuando el número de archivos cargados supere el límite (una función que se ejecutará cuando se cargue una imagen mediante múltiples operaciones)
• :clase: estilo de clase dinámico (usado para controlar el botón de carga después de cargar una imagen con éxito)
• :acción: se utiliza para almacenar la interfaz para cargar imágenes proporcionada por el backend (en términos generales, el backend proporcionará una interfaz para cargar imágenes. Cuando los datos de la imagen se transmiten al backend, el backend le dará al frontend la dirección de almacenamiento en la nube de la imagen)
• :file-list: lista de archivos cargados, en forma de matriz (al cargar una imagen, la imagen se almacenará en la lista definida por esta propiedad)
• :headers: establezca el encabezado de la solicitud al cargar, formulario de objeto (al cargar la interfaz, debe colocar la información de autorización del token en el encabezado de la solicitud, escriba el encabezado de la solicitud aquí)
• list-type : el tipo de lista de archivos
• :on-success: la función ejecutada cuando la imagen se carga correctamente (se utiliza para capturar la dirección de almacenamiento en la nube de la imagen devuelta por el backend, de modo que esta dirección URL se pueda cargar en el backend cuando se envíe el formulario más tarde)
• :on-remove: gancho para eliminar archivos de la lista de archivos (cuando se elimina el evento de la imagen cargada, se borrará la dirección de la imagen URL capturada previamente)

3.1 El pozo que pisaste

• Pregunta 1: ¿Cómo usar el estilo de clase dinámica para mostrar y ocultar el botón de carga?
• Respuesta 1: La variable noneBtnDealImg se usa para juzgar

:class="noneBtnDealImg ? 'disUoloadSty':''"

Escriba una variable en los datos, noneBtnDealImg es verdadero o falso para controlar si el-upload existe disUoloadSty nombre de clase

Escriba el selector de profundidad en css, cuando haya un nombre de clase disUoloadSty, ​​oculte el botón de carga.

/deep/ .disUoloadSty .el-upload--picture-card{
    
    
  display:none;   /* 上传按钮隐藏 */
}

El punto de entrada es que se oculta cuando la carga se realiza correctamente y se muestra cuando se elimina. Luego:
①En caso de éxito, escriba para juzgar si la longitud de la lista de archivos de la lista de archivos es uno.
Cuando es 1, noneBtnDealImg se establece en verdadero.En este momento, el-upload tiene el nombre de clase disUoloadSty y ejecuta el estilo de botón oculto en csss.

②En on-remove, escriba para determinar si la longitud de la lista de archivos de la lista de archivos es uno.
Cuando no es 1, noneBtnDealImg se establece en false En este momento, el-upload no tiene el nombre de clase disUoloadSty, ​​y el estilo de botón oculto en csss no se ejecutará.

• Pregunta 2: ¿Cómo colocar :headr en el-upload en el objeto de encabezado de solicitud?
• Respuesta 2: Se puede definir una variable en :header, y esta variable se puede configurar en los datos, y el objeto del encabezado de la solicitud se puede configurar en los datos.

4.1 Marco o lenguaje correspondiente

Idioma: html, js, css
Marco: elemnet-ui, vue 2.0

5.1 Códigos relacionados

<template>
  <div class="stylebg">
    <h3>背景宣传图</h3>
    <el-upload
      :limit="1"
      :on-exceed="(files, fileList)=>handleExceed(files, fileList, 1)"
      class="avatar-uploader"
      :class="noneBtnDealImg ? 'disUoloadSty':''"
      :action="uploadfileurl"
      :file-list="fileList"
      :headers="headerObj"
      style="padding:30px 0 ;"
      list-type="picture-card"
      :on-success="(res, file, fileList)=>handleAvatarSuccess(res, file, fileList,'img')"
      name="image"
      :on-remove="(file,fileList)=>handleRemove(file,fileList,'img')">
      <i class="el-icon-plus" ></i>
    </el-upload>
    <el-button @click="toUpDate" type="primary">提 交</el-button>
  </div>
</template>

<script>
import {
    
    getBGAPI,setBGAPI} from "@/api/homePageManage.js"
export default {
    
    
  data(){
    
    
    return{
    
    
      fileList:[],
      headerObj: {
    
    
        authorization: localStorage.getItem('token')
      },
      img:'',
      noneBtnDealImg:false,
      uploadfileurl:this.uploadFileURL,
    }
  },
  created(){
    
    
    this.getBG()
  },
  methods:{
    
    

    handleExceed(files, fileList, num) {
    
    
      this.$message.warning(`当前限制选择 ${
      
      num} 个文件，本次选择了 ${
      
      files.length} 个文件，共选择了 ${
      
      files.length + fileList.length} 个文件`);
    },

    // 图片上传
    handleAvatarSuccess(res,file,fileList,name) {
    
    
      this.img = res.data.path2[0]
      this.noneBtnDealImg = fileList.length >= 1
    },

    //图片删除
    handleRemove(file,fileList,name) {
    
    
      this.img = ''
      this.noneBtnDealImg = fileList.length >= 1
    },

    //获取背景宣传图
    getBG(){
    
    
      this.fileList = []
      getBGAPI().then(res => {
    
    
        console.log(res.img)
        this.fileList.push({
    
    'url':res.img})
        this.noneBtnDealImg = this.fileList.length >= 1
        this.img = res.img
      })
    },

    //提交背景宣传图
    toUpDate(){
    
    
      setBGAPI({
    
    
        img: this.img
      }).then(res => {
    
    
        this.$message.success('设置成功')
        this.getBG()
      })
    }
  }
}
</script>

<style lang="less" scoped>

/deep/ .crsBanner {
    
    
    .el-form-item__label::after {
    
    
      content: '(最多1张)';
      display: block;
      font-size: 12px;
      color: #999;
      line-height: 12px;
    }
  }

/deep/ .allUpload {
    
    
    .el-form-item__content{
    
    
      // flex: none !important;
      display: flex;
    }
  }

/deep/ .el-upload-list__item{
    
    
  transition: none !important
}

/deep/ .disUoloadSty .el-upload--picture-card{
    
    
  display:none;   /* 上传按钮隐藏 */
}

/deep/ .el-upload-list__item{
    
    
  width:300px;
  height:300px;
}

</style>

6.1 Ejecutar captura de pantalla