element-ui中Upload 上传文件的使用

在这里插入图片描述
功能模块

1. 上传图片
2. 删除图片
3. 预览图片(点击文件名)

<template>
  <div>
     //action必选参数，上传的地址(要写完整的路径)
     //on-preview
    <el-upload action="http://127.0.0.1:8888/api/private/v1/upload":on-preview="handlePreview" :on-remove="handleRemove" :headers="handersObj" :on-success="handlesuccess" list-type="picture">
        <el-button size="small" type="primary">点击上传</el-button>
    </el-upload>

    <!-- 图片预览框 -->
    <el-dialog title="图片预览" :visible.sync="dialogPreview" width="50%">
      <img :src="PreviewImg" alt class="preview" />
    </el-dialog>
  </div>
</template>

export default {
  data() {
    return {
        addForm: {
        goods_name: '',
        goods_price: 0,
        goods_weight: 0,
        goods_number: 0,
        // 商品所属的分类数组
        goods_cat: [],
        // 图片的数组
        pics: []
      },
      // 图片上传组件的headers请求头对象
      //项目中我们把token存在了 config.headers.Authorization中，但是封装的组件的token不是存在Authorization中，所以出现无效的token。给请求头赋值一个项目的token
        handersObj: {
        Authorization: window.sessionStorage.getItem('token')
      },
       // 控制图片预览的显示与隐藏
       dialogPreview: false,
       // 图片的上传路径  这里的路径不能为临时路径  要为上传的url路径
       PreviewImg: ''
    }，
   methods: {
       // 监听图片预览效果
        handlePreview(file) {
          console.log(file)
          // url是上传的路径 这里不能用临时路径
          this.PreviewImg = file.response.data.url
          this.dialogPreview = true
          // console.log(this.PreviewImg)
        },
        
        // 监听图标移除事件
        handleRemove(file) {
          // console.log(file)
          //  1. 获取将要删除的图片的临时路径
          const filePath = file.response.data.tmp_path
          // 2. 从 pics 数组中，找到这个图片对应的索引值
          const i = this.addForm.pics.findIndex(val => {
            return val.pic === filePath
          })
          // 3. 调用数组的 splice 方法，把图片信息对象，从 pics 数组中移除
          this.addForm.pics.splice(i, 1)
          // console.log(this.addForm)
        },
        
        // 监听文件上传成功的钩子
        handlesuccess(response, file, fileList) {
          // console.log(response)
          // tmp_path上传文件的临时路径
          const picInfo = { pic: response.data.tmp_path }
          this.addForm.pics.push(picInfo)
          // console.log(this.addForm)
        }
   }
}

所遇问题

在这里插入图片描述

项目中我们把token存在了 config.headers.Authorization中，但是封装的组件的token不是存在Authorization中，所以出现无效的token。解决

在这里插入图片描述

通过文档给的这个headers这个属性重现赋值，获取我们项目存储的token然后赋值给headers

在这里插入图片描述