vue中使用el-upload上传组件并且和后台的联调

最新推荐文章于 2025-10-08 05:08:25 发布

原创

最新推荐文章于 2025-10-08 05:08:25 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js

本文介绍了在Vue项目中如何在已经引入Element-UI库的情况下，使用el-upload组件进行文件上传。关键点包括在main.js中注册组件，设置action属性为后台提供的接口地址，name属性与后台参数保持一致，以及通过headers携带token进行身份验证，特别是使用vuex来管理token。示例代码展示了如何在组件中设置headers。

前提：在elemnet-ui中组件能应用的情况下，在vue项目中使用el-upload上传组件在main.js中注册el-upload后

 <el-upload
            class="avatar-uploader"
            action="http://127.0.0.1:3000/api/admin/upload"
            :show-file-list="false"
            :on-success="handleSuccess"
            :before-upload="beforeUpload"
            name="banner"
            :headers="myHeaders"
          >
            <img
              v-if="bannerObj.imgUrl"
              :src="bannerObj.imgUrl"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>

注意事项： action：这个值是后台传的地址 name="banner" 是和后台传的参数一致：headers="myHeaders" 存token

由于此处是post接口，所有需要带token （我使用的是vuex）

import { mapGetters } from "vuex";

created() {