Solución de almacenamiento de carga de imágenes para la configuración de la aplicación Tencent cloud cos

目标:Comprender las principales soluciones de almacenamiento de imágenes y procesos de carga

descripción del plan

plan	Escenas	¿Es la corriente principal?
Almacenar en el servidor ordinario de su empresa	Escena simple con pocas imágenes.	No
Almacenado en un servidor en la nube de terceros	Se requiere una gran cantidad de imágenes y videos, etc., y funciones adicionales, como procesamiento de marca de agua, revisión de video, etc. (los profesionales hacen cosas profesionales) Qiniu Cloud/Tencent Cloud/Alibaba Cloud	Sí

El recurso real de la imagen se almacenará en el servidor en la nube de terceros, y nuestra propia base de datos almacenará una dirección URL de imagen válida

Descripción del flujo

Si subimos la imagen al servidor de la nube, ¿cómo es el proceso de carga? El método de carga de imágenes en el backend es más versátil, porque es más fácil controlar el control unificado del backend mediante el diseño de algunas estrategias de seguridad, como el control de clave secreta al transmitir imágenes.

Configuración de la aplicación Tencent Cloud Cos

Objetivo: crear un almacenamiento en la nube gratuito utilizando los servicios Tencent Cloud disponibles en el mercado

1. Cree una cuenta para la autenticación de nombre real

Aquí debe completar la información de su nombre real, puede estar seguro de escribir, no se filtrará

2. Crea un cubo

3. Establecer reglas cors

Aquí, debido a que estamos probando la carga, todas las cargas están permitidas. El entorno de producción real necesita configurar el nombre de dominio específico y el método de operación por separado.

4. Instrucciones de configuración clave

El servidor es personal y requiere ciertos permisos para subir imágenes libremente. La persona responsable de la verificación de permisos es en realidad la clave secreta, lo que significa que tener la clave secreta es una condición necesaria para cargar

Configuración clave

consejos de seguridad

En el trabajo real, la clave secreta es información confidencial y no se puede almacenar directamente en el front-end, lo que es propenso a problemas de seguridad. Un mejor enfoque es entregar la clave secreta a la administración del back-end. El front-end obtiene la clave secreta llamando primero a la interfaz.Después de tener la clave secreta, cargue

Hemos completado lo anterior, todos los preparativos ~

5. Subir componente - paquete básico

Objetivo: encapsular un componente de carga común para que lo usen los componentes comerciales

Comprender los requisitos y crear un nuevo componente de carga

entender las necesidades

Objetivo: las imágenes de perfil de los empleados y otros nombres y números de teléfonos móviles son varios campos que se yuxtaponen. Estos campos deberán enviarse al backend a través de la interfaz en el futuro.

Seleccione una imagen a través del componente de carga y cargue la imagen en el servidor de la nube. El servicio de la nube nos devuelve una URL de imagen válida.

Crear un nuevo componente de carga pública

Nuestra función de carga se basa en el desarrollo secundario del componente de carga de elementos, primero prepare el componente de carga de elementUI que necesitamos y seleccione un código de muestra adecuado de acuerdo con nuestras necesidades comerciales específicas.

Configuración de carga personalizada

Atributo clave: :http-request="upload" action="#"
Use el comportamiento personalizado para anular la carga predeterminada, tenga en cuenta que una vez que se establece el comportamiento de carga personalizado, todas las operaciones de carga deben implementarse usted mismo, como el procesamiento de datos, después de cargar con éxito las operaciones posteriores, la función de gancho en caso de éxito no seguirá activando

<template>
  <div>
    <el-upload
      class="avatar-uploader"
      action="#"
      :show-file-list="false"
      :on-success="handleAvatarSuccess"
      :before-upload="beforeAvatarUpload"
      :http-request="upload"
    >
      <img v-if="imageUrl" :src="imageUrl" class="avatar">
      <i v-else class="el-icon-plus avatar-uploader-icon" />
    </el-upload>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: ''
    }
  },
  methods: {
// 回调函数 自定义上传逻辑 适合不能直接上传给自己的服务器 需要一些自定义写法上传三方  加上这个之后 组件只负责图片校验 上传部分不管了
    upload(file) {
      console.log(file)
    },
// 上传完毕自动执行 添加:http-request后 当前函数失效
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
    },
// 上传前自动效验 校验通过执行
    beforeAvatarUpload(file) {
      const isPNG = file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isPNG) {
        this.$message.error('上传头像图片只能是 PNG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isPNG && isLt2M
    }
  }
}
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

Implementar carga y eco

Realice la función de carga de acuerdo con la API de carga de
la dirección del documento en la nube de cos Tencent https://cloud.tencent.com/document/product/436/35649#.E7.AE.80.E5.8D.95.E4.B8. 8A.E4 .BC.A0.E5.AF.B9.E8.B1.A1
1- Instalar archivo sdk

npm i cos-js-sdk-v5

2- Introducir Cos e instanciar el objeto cos

Nota: Esto solo se puede usar como una prueba para evitar exponer directamente la identificación de la clave en el código js.
Si el front-end aún lidera la carga durante el desarrollo real, el proceso correcto es el siguiente:
1. El front-end necesita para llamar a una interfaz de back-end propia para obtener una clave secreta temporal [caducará en poco tiempo]
2 Pasar la clave secreta temporal obtenida para crear una instancia de un objeto cos
3 Enviar los datos que desee

// 引入必要的COS模块
const COS = require('cos-js-sdk-v5')
// 实例化对象
const cos = new COS({
  SecretId: 'xxxx', // 身份识别ID
  SecretKey: 'xxxx' // 身份秘钥
})

3- Use el objeto cos para completar el
objeto de carga de almacenamiento de objetos de carga-Documentación SDK-Centro de documentación-Tencent Cloud

upload({file}) {
  if (file) {
    // 执行上传操作
    cos.putObject({
      Bucket: 'xxxxxx', /* 存储桶 */
      Region: 'xxxx', /* 存储桶所在地域，必须字段 */
      Key: file.name, /* 文件名 */
      StorageClass: 'STANDARD', // 上传模式, 标准模式
      Body: file, // 上传文件对象
      onProgress: (progressData) => {
        console.log(JSON.stringify(progressData))
      }
    }, (err, data) => {
      console.log(err || data)
      // 上传成功之后
      if (data.statusCode === 200) {
        this.imageUrl = `https:${data.Location}`
      }
    })
  }
}

6. Subir componente - uso empresarial

`任务:` Use el modo de comunicación entre padres e hijos para realizar el eco de carga de imágenes

1- Realizar el envío de url a la base de datos [del niño al padre]

// 子组件
if (data.statusCode === 200) {
  this.imageUrl = `https://${data.Location}`
  // 执行这个自定义事件把url传出去
  this.$emit('get-url', this.imageUrl)
}

// 父组件
<upload-img  @get-url="getUrl" />
  
getUrl(url) {
  console.log(url)
  // 图片上传完毕之后 用于提交给后端的字段里就有了有效的url
  this.userInfo.staffPhoto = url
}

2- Actualice y rellene la URL de la imagen [padre a hijo + sincronización del reloj]

// 父组件
<upload-img :url="userInfo.staffPhoto" @get-url="getUrl" />


// 子组件
props: {
  url: {
    type: String,
    default: ''
  }
},
watch: {
  url: function() {
    this.imageUrl = this.url
  }
}