Vue element ui 拖拽上传

最新推荐文章于 2025-01-08 18:09:03 发布

原创最新推荐文章于 2025-01-08 18:09:03 发布 · 1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue

本文详细介绍如何使用Element UI的上传组件实现文件拖拽上传功能，包括html代码配置、js逻辑处理、设置上传请求头及响应处理。适用于前端开发者快速掌握Element UI文件上传组件的使用。

html代码

          <el-upload
            class="upload-demo"
            drag
            action="/api/upload" //写自己的目录
            multiple
            :headers="headers"	//	设置上传的请求头部
            :on-success="onSuccess"
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将文件拖到此处，或
              <em>点击上传</em>
            </div>
            <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>

js代码

    //上传成功
    onSuccess(res) {
     console.log(res)
    },

  mounted() {
    let token = localStorage.getItem('adminToken')	//先获得令牌
    this.headers = {
      Authorization: token	 
    }
  },