一，实现图片上传功能

1.使用上传组件upload

使用图片列表缩略图这种方法

<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(){}

但此时看似上传成功了，看到图片列表，并不一定是上传成功了，在面板里是无效的，所以是假象

说明上传组件没有使用到axios发送请求，而是组件内部自动封装了一个axios请求，是没有用到authorization,查看组件身上有没有配置项，提供token

2.配置请求头节点

发现有一个headers请求头的配置节点，去指定authorization

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

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

上传成功只代表服务器存储了这张图片

这张图片的相关信息还需要存储到表单中

3，图片信息存储到表单里的思路

找到添加商品的API，在发post请求的参数中有一个pics参数，是指向一个数组，每一个对象都代表一个上传成功的图片

pic属性指向服务器返回的图片的临时路径

服务器返回的数据中包含meta和data，结果中有tmp_path，是服务器保存的图片的临时存放路径，要以对象的形式添加到数组中

4.如何监听图片上传控件已经成功上传一张图片

组件里有一个On-success钩子函数

只要图片上传成功，就会立即调用handleSuccess

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

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

这样就可以监听到上传路径了

5。拼接路径

addForm: { //图片数组

pics:[]

  //监听图片上传成功的事件
        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)
        }

二，实现图片的移除操作

把对应的图片路径从pics中移除

  //处理移除图片的操作
        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)
        },

三。图片预览效果

 <!-- 图片预览对话框 -->
            <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%;
}

黑马】后台管理系统165-170