Element-Ui之Upload组件,利用axios+阿里oss上传

最新推荐文章于 2025-03-20 13:49:41 发布

flee-lether

最新推荐文章于 2025-03-20 13:49:41 发布

阅读量1.7k

点赞数 1

分类专栏： vuejs web 文章标签： vue element-ui oss axios

本文链接：https://blog.youkuaiyun.com/qq_23398171/article/details/89493930

版权

本文介绍了如何将阿里OSS作为文件服务器，并结合Element-UI的Upload组件，通过axios进行文件上传。主要涉及重写http-request属性以实现自定义上传逻辑。

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

利用阿里oss做文件服务器，配合element-ui的upload组件实现。

通过重写upload组件的http-request属性实现。具体实现逻辑如下：

配置axios
重写http-request请求
在引用Upload时重写http-request
具体实现

fnOSSUpload(options) {
   
   const that = this;
   that.$http
     .get(options.action)
     .then(res => {
   
       if (res.code === 1) {
   
         let uploadData = new FormData();
         uploadData.append(

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

flee-lether

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

vue中使用axios 结合element-ui 上传组件,上传文件

weixin_44514665的博客

08-10

2524

vue中使用axios 结合element-ui 山川组件,上传文件最近接到一个需求,需要做一个上传文件和下载文件的功能,主要使用的场景是用户上传文件,和下载样例文件,上传和下载的请求都需要带上请求头 token,主要使用:axios,element的上传组件进行自定义上传;主要操作代码如下: 上传文件 <el-upload class="upload-demo" ref="uploadFilder" :action="up

vue3+Ts+element-plus+Upload+阿里云OSS前端直传组件二次封装

qq_38902432的博客

09-27

4476

vue3+Ts+element-plus+Upload+阿里云OSS前端直传组件二次封装

1 条评论您还未登录，请先登录后发表或查看评论

Vue Element UI + OSS实现上传文件功能

10-16

主要为大家详细介绍了Vue Element UI + OSS实现上传文件功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

vue前端直接使用element-ui的upload组件上传到阿里云OSS存储

時間的博客

03-06

840

需要实现这个功能，然后就百度了会，找到了篇能直接拿过来用的demo。但是自己还是要记录一下，以后如果再使用的话就方便好多了。

大文件上传、断点文件上传

最新发布

qq_50949240的博客

03-20

287

前端查询此文件已经上传的块列表（哈希值），跳过已经上传的块。继续之间的进度，每次上传文件都携带该片段的哈希值。：使用file.slice(start,end),将文件分割成多个片段chunk，携带索引等信息，发送给后端。实际开发中，存在因网络原因中断或者手动中断上传等需求，为了避免文件重复上传，提升效率，采用断点上传的方式。上传文件chunk的时候，同时携带该文件片段的哈希值。切换新文件时，清空之前进度，从0开始。:当文件过大或者服务器限制时，采用大文件上传方式。

el-upload基于axios自定义上传formdata文件

gongliming_qd的博客

12-13

2465

使用el-upload，选中一个文件后，导入按钮消失使用 el-upload自定义formdata格式上传文件，组织默认提交使用axios来进行formdata的ajax请求

el-upload文件上传进度条，通过axios实现

qq_39037897的博客

06-30

752

<el-upload drag action="" :http-request="self_upload" :limit="1" ref="imgUrl" accept="*" > <i class="el-icon-upload"></i> ...

vue+element-ui，用el-upload实现阿里云Oss文件上传

10-18

Vue.js 和 Element UI 结合可以方便地构建用户界面，Element UI 的 `el-upload` 组件恰好提供了一个现成的解决方案来处理文件上传，包括阿里云 OSS（Object Storage Service）。以下是使用 `el-upload` 实现阿里云...

Vue3 + Element-Plus + vue-draggable-plus 实现图片拖拽排序和图片上传到阿里云 OSS 父组件实现真正上传（最新保姆级）

一名全栈小白的博客

12-15

842

Vue3 + Element-Plus + vue-draggable-plus 实现图片拖拽排序和图片上传到阿里云 OSS（最新保姆级）

前端element-ui中图片oss直传到阿里云

zy158982045727的博客

05-18

377

template中的内容： <template> <el-upload class="avatar-uploader" action="" :show-file-list="false" :on-success="handleAvatarSuccess" :http-request="Uploadfile" > <img v-if="pictureUrl.trim() != ''" :s

前端使用el-upload实现单个图片直接上传阿里云OSS

m0_65029152的博客

01-20

2387

本文主要记录下前端如何直接将图片上传至阿里云OSS；

elmentui[上传组件el-upload配合axios进行文件上传操作]

墨水白云的博客

04-23

4221

文件上传操作方式一：直接使用elementui本身的上传组件进行

el-upload手动上传，自定义axios方法上传文件

y206206的博客

08-20

5145

今天在使用element的文件模块时，使用了手动上传的方法，官网上的示例是直接使用this.$refs.upload.submit()直接请求后台，我测试过了，是可以获取到数据的，但是我不知道这个方法如何处理后台传过来的参数，就产生了一个自定义axios方法上传文件的想法，这里面的核心主要是要获取到上传的文件对象。模版部分 <el-upload class="upload-demo" ref="upload" :on.

elementui-plus+ts+axios使用el-upload组件自定义上传

只会写bug的靓仔的博客

09-23

3533

使用element ui有很多便捷之处，但是由于是封装的组件和自己写还是有些许的不一样，这里主要解决几个问题。1. 如何获取子组件实例2. 如何自定义上传方法。

Element UI文件拖拽上传至oss（结合vxe弹框）

dreamy_wx的博客

11-24

478

<el-button size="small" type="primary" @click="addFile()">新增文件</el-button> <vxe-modal ref="xModal" v-model="attachment" row-id="id" title="上传文件"

element UI + 阿里云OSS上传文件

Liu_JiaqiPro的博客

10-22

1751

第一步：vue安装ali-oss： npm install ali-oss --save 第二步：elementUI完成前端代码 action要有，没有会报错 accept是选择文件时，看到的文件类型和:on-change="addchange"功能类似 limit是选择的文件个数和on-exceed="imgexceed"功能是一样的 <el-form-item label="上传视频或图片"> <el-upload......

element-ui upload组件完美适配oss 解决方案

shi860715的博客

09-27

1303

oss 存储方案 1 oss 基础配置 1 .1创建bucket 1.2 创建子账户创建用户并授予编程访问权限：创建用户成功后的样式： 1.3 授权完成oss所有的权限 2 oss 官方文档地址 2.1 官方帮助文档： https://help.aliyun.com/document_detail/32006.html 2.2 安装sdk <dependency> <groupId>com.aliyun.oss</groupId> <

vue项目使用axios+element-ui的upload组件实现文件上传功能

weixin_30859423的博客

07-31

1338

1 <el-upload 2 class="avatar-uploader" 3 action 4 name="file1" 5 :show-file-list="false" 6 :http-request="uploadImg" 7 > 8 　　<div class="upload-btn">上传</div> 9 ...

vue2+element-ui 实现OSS分片上传+取消上传

wcy0112的博客

03-19

1209

项目中需要上传500MB以上的视频。一开始使用上传组件el-upload，调用后台接口，但是出现了onprogress显示百分百后接口一直pending，过了很多秒后接口才通，如果遇到大文件的话，接口就会报超时。使用阿里云OSS的分片上传。