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

最新推荐文章于 2025-04-24 14:51:57 发布

chengxue_123

最新推荐文章于 2025-04-24 14:51:57 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏：应用文章标签：前端 vue.js

本文链接：https://blog.youkuaiyun.com/chengxue_123/article/details/109628709

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前提：在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 （我使用

最低0.47元/天解锁文章