你小程序里多半有一段长得像这样的上传代码：

// pages/feedback/index.vue
export default {
data {
return {
uploading: false。percent: 0,uploadTask: null
};},methods: {
handleUpload {
uni.chooseImage({
至于count。1,success: res => {
this.uploading = true;const task = uni.uploadFile({
url的观点是，'https://api.example.com/uploadImg',filePath: res.tempFilePaths。name: 'file',formData: { from: 'feedback' },success: => { this.uploading = false;},fail: => {
this.uploading = false;uni.showToast;}
})，其实，task.onProgressUpdate;this.uploadTask = task;// 存起来取消时才用得到
}
});},handleCancel {
this.uploadTask && this.uploadTask.abort;this.uploading = false;老实说，this.percent = 0;}
}
}，

它能跑，也上线了。但这段代码有三处不对劲：

1. 状态是手工账。 uploadingpercentuploadTask 三个字段，得在 success / fail / 取消三条方法里挨个复位。哪天加个“失败自动清进度”，漏改一条方法，进度条就永远停在 %。
2. 取消靠自觉。 uploadTask 引用得自己存，取消得自己调 abort复位得自己写。页面一销毁忘了取消，请求还在后台跑。
3. 没法复用。 头像、意见反馈、工单附件，每个页面把五十行复制一遍改个 url。三个月后想统一加登录态过期处理，得找出所有副本挨个改。

User Pain Points

• "点了上传没进度。以为卡死，再点一次服务器收到两张一样的图。" — 使用者体验差、重复请求导致服务器压力。
• "进度条卡住" — 当网络波动或异常时进度不恢复，让使用者产生误解。
• "手动管理状态" — 开发者需要维护多条方法，一旦疏漏就会出现 bug。
• "代码不可复用" — 每次都要复制粘贴并修改 URL，维护成本高。

理想的上传该长什么样

把需求摊开。其实就四条：

• 进度、加载态是响应式状态，不是手工变量，任何方法退出都自动复位；
• 取消是内置动作，不用自己攒 task 引用；
• 重传就是再调一次不用把 chooseImage 到 uploadFile 整条链重走；
• 写法和普通请求一致，上传不该是一套独立于 GET/POST 之外的。其实，

第 4 条最容易被忽略。但它决定三个月后的维护成本：分页一套写法、上传又一套写法，团队每个人都在维护好几套私房封装。

顺着这份清单找，会发现这正是请求策略库在做的事。alova 的定位是一套请求 API 跑在 Web、小程序/App、服务端，上传只是其中一个策略场景。

换成 alova 写一遍

至于先装包，

npm install alova @alova/adapter-uniapp @alova/shared --save

建实例。 请求/存储适配器一次配齐：

// api/index.js
import { createAlova } from 'alova';import AdapterUniapp from '@alova/adapter-uniapp';export const alovaInst = createAlova({
baseURL: 'https://api.example.com'。...AdapterUniapp,responded {
const { statusCode,data } = response;if throw new Error;return data || null;}
})，

上传本身，在 method 的 config 里标 requestType:'upload' 即可；不过，适配器内部会改调，name,filePath… 把其它字段自动塞进 formData：

import { computed } from 'vue';import { useRequest } from 'alova/client';import { alovaInst } from '@/api';const uploadFile = =>
alovaInst.Post(
'/uploadImg',{ name,filePath。...formData },// 自动塞到 formData
{ requestType:'upload',fileType:'image' }
);按理说，const { loading,uploading。send,abort } =
useRequest;const percent = computed =>
uploading.value.total?Math.floor*100)
:0);const handleImageChoose==>{
uni.chooseImage({
再看count。1,success=>send
});}

对照开头那三条清单：

• 进度：;上传状态返回对象中有loaded,total。直接算百分比，无需手写 onProgressUpdate；
• 加载态：`loading` 自动起落。在任何情况下都会复位，不会出现“进度卡住”的情况；
• 取消：`abort` 已解构出来可直接绑按钮，无需自行管理 task 引用；
• 重传：`send` 再调用即可重试，可携带不同参数；
• **统一 API**：`data`、`loading` 与普通请求完全同名同形，让使用者零学习成本。— 清单第 ^*4* — #4 条原则：上传不再是！

如果你项目已经在用 axios，它不冲突：axios 可以作为 alova 的请求适配器继续发请求。axios负责发 HTTP，而 alova负责业务层逻辑与状态管理。小程序环境基本不用 axios，这里按下不表。

多文件、批量怎么办？

单文件够用了就到此为止。话说回来，要实现“九宫格传图 + 每张独立进度 + 单张失败重传”。可以使用 alova@+ 的 `useUploader`：

• DIRECT 类型支持 base64 / File / Blob / ArrayBuffer，一键丢进去即可；每个文件都有独立 status 和 progress；upload 指定重传逻辑；mode:'batch' 批量提交.
• 默认弹窗选文件只在浏览器里有效，小程序/uni‑app 环境需要通过 useUploader.selectFile 自定义选择逻辑。
• 单文件场景请继续使用上面的 useRequest 写法，不必额外引入 useUploader。

• 上一篇： 显存容量如何决定模型大小？
• 下一篇： MCP协议2026年7月28日升级，核心变化有哪些？