ElementUI实现图片上传的功能~（已完成✔）

Vue项目中经常会遇到使用ElementUI实现图片上传的需求~（已完成✔）

打开官网有个Upload 上传组件-通过点击或者拖拽上传文件：本次项目中用到了：图片列表缩略图结构

            <!–            action-表示图片要上传到的后台api地址–>
            <!–            on-preview-点击预览图片的时候触发的事件–>
            <!–            on-remove-点击叉号移除图标的时候触发的事件–>
            <!–            file-list-文件列表–>
            <!–            list-type-可以设置当前上传的图片的预览方式的呈现方式–>

           触发的函数需要在methods里定义一下：       

           handlePreview() {},     // 处理图片预览的时候事件
           handleRemove() {}     // 点击移除图片的处理函数

那么点击上传图片看看效果：可以看出来，本地上传成功，但是不要高兴的太早。F12打开看看network查看状态：

可以看出来，本地上传成功，但是无效的token说明上传还没成功

思路：本地上传成功，还会为什么报错–无效token呢？？

是因为，还记得吗？刚开始做项目的时候我们使用axios来发送ajax请求，除了home和login登录页面外其他的都需要携带token请求头，才能有效访问页面。就是说每一次使用axios发送ajax请求都需要携带请求token，才能有权限。

那么上传图片的时候调用的upload方法没有使用axios。所有报错token无效。UI组件已经是封装的ajax请求了，这没带请求头

看看upload组件官网有没有给我们通过给token值：

既然有了，那么可以给headers设置请求头字段Authorization。在data里定义

//template标签代码
       <el-upload
              class="upload-demo"
              action="https://www.mememem.top:8888/api/private/v1/upload"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              list-type="picture" :headers="headersObj">
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" style="font-size: 8px;margin:5px 0">只能上传jpg/png文件，且不超过500kb</div>
       </el-upload>
//data里的代码
      // 图片上传组件添加Authorization请求头对象，
      // 每一次方式请求都有了token请求头，从session里拿到
      headersObj: {
        Authorization: window.sessionStorage.getItem('token')
      }

最终都成功啦！！！效果

原文地址：http://www.cnblogs.com/mahmud/p/16931006.html