1. Realice la función de carga de imágenes

1. Utilice la carga del componente de carga

Utilice el método de miniaturas de la lista de imágenes

<el-tab-pane label="商品图片" name="3">
                        <!--upload上传组件 action图片要上传到的后台API接口地址，在入口函数中找到根路径，还需要在v1后面补全接口地址 -->
                         <!-- 地址也可以精简，放在data里：action="http://127.0.0.1:8888/api/private/v1/upload" -->
                        <!--on-preview点击弹出预览窗口  
                         list-type：指定当前预览组件的呈现方式，是文件形式，还是拖拽，图片列表等-->
                        <el-upload 
                         :action="uploadURL"
                            :on-preview="handlePreview" :on-remove="handleRemove" 
                            list-type="picture">
                            <el-button size="small" type="primary">点击上传</el-button>
                        </el-upload>
                    </el-tab-pane>


DATA
  //上传图片的URL地址
            uploadURL:'http://127.0.0.1:8888/api/private/v1/upload'
        }

 //处理图片预览效果
        handlePreview(){},
        //处理移除图片的操作
        handleRemove(){}

Pero en este momento, parece que la carga se ha realizado correctamente. Cuando vea la lista de imágenes, no significa necesariamente que la carga se haya realizado correctamente. No es válido en el panel, por lo que es una ilusión.

Explique que el componente de carga no usa axios para enviar solicitudes, pero una solicitud de axios se encapsula automáticamente dentro del componente y no se usa la autorización. Verifique si hay elementos de configuración en el componente y proporcione el token

2. Configure el nodo del encabezado de la solicitud

Se encontró un nodo de configuración con un encabezado de solicitud de encabezados para especificar la autorización

list-type="imagen" :headers="headerObj"

 //图片上传组件的headers请求头对象,在请求头中都包含一个Authorization
            headerObj:{
                Authorization :
                window.sessionStorage.getItem('token')
            }

Una carga exitosa solo significa que el servidor ha almacenado la imagen

La información relevante de esta imagen también debe almacenarse en el formulario

3. La idea de almacenar información de imágenes en forma

Encuentre la API para agregar productos. Hay un parámetro de fotos en los parámetros de la solicitud de publicación, que apunta a una matriz. Cada objeto representa una imagen cargada correctamente.

El atributo pic apunta a la ruta temporal de la imagen devuelta por el servidor.

Los datos devueltos por el servidor contienen metadatos y el resultado contiene tmp_path, que es la ruta de almacenamiento temporal de la imagen guardada por el servidor, y debe agregarse a la matriz en forma de objeto.

4. Cómo monitorear que el control de carga de imágenes haya cargado correctamente una imagen

Hay una función de gancho en caso de éxito en el componente

Siempre que la carga de la imagen sea exitosa, se llamará inmediatamente a handleSuccess

list-type="imagen" :headers="headerObj" :on-success="handleSuccess">

   //监听图片上传成功的事件
        handleSuccess(response) {
            console.log(response)
        }

De esta manera, puede monitorear la ruta de carga

5. ruta de costura

addForm: { // matriz de imágenes

fotos:[]

  //监听图片上传成功的事件
        handleSuccess(response) {
            console.log(response)
            //1.拼接得到一个图片信息对象
            const picInfo = {
                pic:
                    response.data.tmp_path
            }
            //2.将图片信息对象，push到pics数组中
            this.addForm.pics.push(picInfo)
            console.log(this.addForm)
        }

En segundo lugar, realice la operación de eliminación de la imagen.

Eliminar la ruta de la imagen correspondiente de las fotografías

  //处理移除图片的操作
        handleRemove(file) {
            //1.获取将要删除的图片的临时路径
            const filePath =
            file.response.data.tmp_path
            //2.从pics数组中，找到这个图片对应的索引值
            const i = this.addForm.pics.findIndex((x)=>
                x.pic === filePath
            )
            //3.调用数组的splice方法，把图片信息对象，从pics数组中移除
            this.addForm.pics.splice(i,1)
            console.log(this.addForm)
        },

tres. Efecto de vista previa de imagen

 <!-- 图片预览对话框 -->
            <el-dialog title="图片预览" :visible.sync="previewVisible" width="50%">
                <img :src="this.previewPath" class="previewImg">
            </el-dialog>

data:

   //图片预览的路径
            previewPath: '',
            //预览图片对话框的显示与隐藏
            previewVisible: false,

method
  //处理图片预览效果
        handlePreview(file) {
            this.previewPath = file.response.data.url
            this.previewVisible = true
        },

.previewImg {
    width: 100%;
}

Dark Horse] sistema de gestión de fondo 165-170