Vue - vue-simple-uploader 设置 target 属性为 axios 实例，如何将target属性上传地址不用字符串，而是使用封装的 axios 请求实例（不用完整请求接口地址）

已于 2025-01-19 15:31:22 修改
阅读量3.4k 收藏 3
点赞数 3
CC 4.0 BY-SA版权
分类专栏： + Vue + Vue2 开发问题汇总 文章标签： vue.js simple-uploader 切片分段上传插件组件 target axios 请求接口地址 服务端地址 使用axios实例作为请求地址
于 2024-04-28 14:17:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44198965/article/details/138273468
+ Vue 同时被 2 个专栏收录
251 篇文章 ¥9.90 ¥99.00
订阅专栏
+ Vue2 开发问题汇总
121 篇文章 ¥9.90 ¥99.00
订阅专栏
本文介绍了在Vue2和Vue3项目中，如何使用vue-simple-uploader分片上传插件并将target属性设置为封装好的Axios实例，而非字符串请求接口地址。通过提供详细代码示例，解决了在实际开发中遇到的问题，允许动态设置target参数和根据条件改变请求地址。

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

前言

网上没有相关教程，本文详细解决设置请求地址的问题。

本文 实现了在 vue2 | vue3 项目开发中，使用 vue-simple-uploader（分片上传）插件时，解决 “target” 属性无法设置 “封装好的Axios实例问题”，插件默认只能设置一个完整字符串请求接口地址，但对于实际开发很可能是统一封装的axios实例（页面引入使用的形式），本文完美解决这个问题！

另外，如果你想动态设置 target 参数、根据条件设置请求地址等，也可以使用本文的方法！

提供详细示例代码，保证完美 100% 解决此问题。

在这里插入图片描述
在这里插入图片描述

解决方案

根据下方提供的思路及代码，快速解决此问题。<

了解本专栏 订阅专栏 解锁全文
探索Vue.js中的文件夹上传解决方案：vue-simple-uploader
小金子J的博客
06-12 4801
vue-simple-uploader是一个基于Vue.js的组件，它不仅支持文件、多文件、文件夹上传，还具备拖拽上传、错误处理、秒传、分块上传等功能。本文详细介绍了vue-simple-uploader的安装、配置、常用方法与事件，并提供了完整的代码实现及注释，帮助开发者快速掌握并应用这一高效的文件夹上传解决方案。
simple-uploader/vue-uploader分片上传视频——vue3
qq_43405603的博客
06-17 3081
二、script标签里 :options="optionsV.optionsV" 三、script标签里 @file-success="onFileSuccess" 四、script标签里 @file-added="onFileAdded" 五、上边函数中的computeMD5(file) 六、script标签里 :auto-start="auto" 六、script标签里 :fileStatusText="status" 七、script中的 re
vue-simple-uploader 的使用(学习笔记)
weixin_45608414的博客
03-06 6246
Vue uploader
[vue2]基于vue-simple-upload的文件分片上传组件
SCUhzs
06-06 1194
[vue2]基于vue-simple-upload的文件分片上传组件
vue-simple-uploader上传组件
weixin_45992894的博客
06-17 8769
vue-simple-uploader是基于 simple-uploader.js 封装的vue上传插件。它的优点包括且不限于以下几种：支持文件、多文件、文件夹上传；支持拖拽文件、文件夹上传 可暂停、继续上传 错误处理 支持“秒传”，通过文件判断服务端是否已存在从而实现“秒传” 分块上传 支持进度、预估剩余时间、出错自动重试、重传等操作安装 使用 源码地址：https://github.com/simple-uploader/vue-uploader 案例：https://gitee.com/luck
vue-simple-uploader 入门，python后端接口的实现
qq_17328759的博客
09-24 8181
继续上一篇 vue-simple-uploader 入门 实现思路：   vue-simple-uploader 组件会接文件切片后，按片上传，后端接口分片接受后保存。   前端完成一个文件的全部切片上传后，给后端发消息，后端收到消息后，将所有切片文件合并为一个文件。 实现步骤： 将app.vue 使用 vue-simple-uploader 组件的代码，放在项目vue_uploader的hello.vue文件中，实现效果相同。需要留意一下@file-complete="fileComplete"，后面
前端使用vue-simple-uploader进行分片上传
ssy001128的博客
01-30 775
main.js初始化vue-simple-uploader。common/config文件。
vue2-multi-uploader-使用Vue.js v2和Axios的拖放式多文件上传器组件。 上载器显示文件名，大小和添加文件的总大小。 它还允许设置所需的最小文件上传数量。-Vue.js开发
05-27
vue2-multi-uploader使用Vue.js v2和Axios的拖放式多个文件上传器组件。 上载器显示vue2-multi-uploader的文件名，大小和总大小使用Vue.js v2和Axios的拖放式多个文件上载器组件。 上载器显示文件名，大小和添加文件...
vue 分布式上传文件vue-simple-uploader
Aa12364567的博客
04-16 722
vue 分布式上传文件vue-simple-uploader。
vue-simple-uploader target
最新发布
01-18
### Vue-Simple-Uploader Target 属性配置及使用 Vue-Simple-Uploader 是一款用于文件分片上传的插件，在实际项目开发中，`target` 属性扮演着至关重要的角色。此属性定义了文件片段将被发送到的目标位置。 当 `...
simple-uploader.js 文档
阿坤的博客
11-26 3236
simple-uploader.js（也称 Uploader) 是一个上传库，支持多并发上传，文件夹、拖拽、可暂停继续、秒传、分块上传、出错自动重传、手工重传、进度、剩余时间、上传速度等特性；该上传库依赖 HTML5 File API。 由于是分块上传，所以依赖文件的分块 API，所以受限于此浏览器支持程度为：Firefox 4+, Chrome 11+, Safari 6+ and Internet Explorer 10+。 安装 npm install simple-uploader.js 使用 创
基于vue-simple-uploader的文件分片上传
weixin_43839531的博客
12-20 893
<template> <div class="main_con"> <uploader :options="options" :file-status-text="statusText" class="uploader-example" ref="uploader" @file-success="fileSuccess" @file-e..
一二三应用开发平台文件处理设计与实现系列之2——前端集成vue-simple-uploader
学海无涯，行者无疆
06-06 6314
文件的上传是系统的必备功能，Element提供了上传组件upload，也基本能满足常见常用的文件上传功能，特别是应对小型文件（10M以下）的处理。但如果是遇到要求更多更高的场景，上传几百兆甚至上G的视频文件，要求分块上传，能断点续传，显示进度，能暂停，能重试……这时候就显得乏力了。如果基于upload实现，需要附加大量的二次开发，这未必是一种最佳实现方案。 这时候，就需要找一找看一看，市面上是否有现成的“轮子”可用了。 接下来，分两篇，分别介绍下前端实现和后端实现，今天首先来说下前端那些事儿。
由simple-uploader.js驱动的Vue.js上传组件
cuk5239的博客
07-22 928
Vue简单上传器 (vue-simple-uploader) A Vue.js upload component powered by simple-uploader.js. 由simple-uploader.js驱动的Vue.js上传组件。 特征 (Features) FileFile Pause/Resume upload 暂停/继续上传 Recover upload 恢复上传 E...
基于vue-simple-uploader实现文件分片上传、秒传、断点续传
顺其自然~专栏
11-21 5923
4）currentChunkSize：当前块的大小，实际大小。5）totalSize：文件总大小。6）identifier：这个就是MD5值，每个文件的唯一标示。7）filename：文件名。
springboot整合vue2-uploader文件分片上传、秒传、断点续传
林夕
05-06 3855
基于封装的vue上传插件。支持文件、多文件、文件夹上传；支持拖拽文件、文件夹上传可暂停、继续上传错误处理支持“秒传”，通过文件判断服务端是否已存在从而实现“秒传”分片上传支持进度、预估剩余时间、出错自动重试、重传等操作2：图片便于理解：秒传：（将文件使用MD5加密，生成一个串，我们拿到这个串到redis 中查看是否存在）
vue-simple-uploader分片上传的后端接口
qq_42988836的博客
04-05 4349
之前做了个使用vue-simple-uploader实现大文件分片上传功能，前端的代码参考夏大师的基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件 基本没有问题。 但是，这位老哥没有给后端接口的代码，于是我只能不断看组件的开发文档、以及网上其他分片上传的后端接口。终于自己摸索出了一个后端接口。 以下代码使用.net 开发，且只简述分片上传的部分，不包括单文件上传 我第一次为这个组件写接口时，把文件上传和分片校验放在了同一个接口，导致一直开发失败。后来仔细阅读博客时注意
Vue —— axios、插槽
weixin_54966486的博客
03-18 3180
配置代理 下载 axios 并引入 npm i axios 配置文件中配置代理： module.exports = defineConfig({ ... devServer: { proxy: { '/proxy01': { //代理前缀 target: 'http://localhost:5000', //代理目标服务器 pathRewrite:{'^/proxy01':''}, //重写路径，把含 /proxy01 前缀替换为空字符.
springboot + vue + vue-simple-uploader 实现大文件分片上传
天弃的博客
03-22 3428
原文章https://www.cnblogs.com/hz-handofgod/p/11985170.html 适当修改 参考官方组件文档https://github.com/simple-uploader/vue-uploader 前台VUE 添加npm包 npm install vue-simple-uploader --save main.js import upLoader from 'vue-simple-uploader' Vue.use(upLoader)...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

蔡来了

请作者喝杯咖啡 :)

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值