###
Vue3 中实现
图片上传的最佳实践和方法
在
Vue3 的开发环境中，利用 Composition API 和增强的响应式系统可以更加高效地实现
图片上传功能。以下是几种常见的最佳实践和技术栈组合：
#### 1. 使用 Base64 编码方式
上传图片
Base64 是一种将二进制数据转换为 ASCII 字符串的方式，在某些场景下可以直接通过 HTTP 请求发送到服务器端[^1]。这种方式适合小型
图片或者不需要存储原始文件的应用。
```javascript
// 将
图片转为 Base64 格式的函数
function getBase64(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result);
reader.onerror = (error) => reject(error);
});
}
async function uploadImage(event) {
const file = event.target.files[0];
try {
const base64String = await getBase64(file);
console.log(base64String); // 发送此字符串至后端
} catch (err) {
console.error(err);
}
}
```
需要注意的是，Base64 数据会增加传输体积约 33%，因此不适用于大尺寸
图片[^1]。
---
#### 2.
图片压缩后再
上传
为了减少带宽消耗并提升用户体验，可以在前端对
图片进行压缩再
上传。推荐使用 `shrinkpng` 或者其他类似的库来完成这一操作[^2]。
##### shrinkpng 压缩流程示例
安装依赖：
```bash
npm install shrinkpng --save-dev
```
引入并调用：
```javascript
import { compress } from 'shrinkpng';
const compressedFile = async (file) => {
const result = await compress([file]);
return result[0]; // 返回压缩后的 Blob 对象
};
async function handleUpload(event) {
const originalFile = event.target.files[0];
const optimizedBlob = await compressedFile(originalFile);
// 转换为 FormData 并提交给后端
const formData = new FormData();
formData.append('image', optimizedBlob, originalFile.name);
axios.post('/upload-endpoint', formData).then(response => {
console.log('成功:', response.data);
}).catch(error => {
console.error('失败:', error.message);
});
}
```
---
#### 3. 利用 Axios 拦截器统一处理请求
Axios 提供了强大的拦截器机制，能够帮助开发者集中管理请求头、参数以及错误捕获逻辑[^1]。
配置全局拦截器：
```javascript
import axios from 'axios';
// 添加请求拦截器
axios.interceptors.request.use(config => {
config.headers['Authorization'] = `Bearer ${localStorage.getItem('token')}`;
return config;
}, error => {
return Promise.reject(error);
});
// 添加响应拦截器
axios.interceptors.response.use(response => {
return response;
}, error => {
if (error.response.status === 401) {
alert('登录已过期，请重新登录');
}
return Promise.reject(error);
});
```
---
#### 4. 结合 TypeScript 增强类型安全性
如果项目采用 TypeScript，则可以通过显式声明变量类型进一步降低潜在风险。
示例代码片段：
```typescript
interface UploadResponse {
success: boolean,
message?: string,
data?: any
}
async function sendToServer(formData: FormData): Promise<UploadResponse> {
try {
const res = await axios.post<UploadResponse>('https://example.com/upload', formData);
return res.data;
} catch (e) {
throw e;
}
}
```
---
#### 5. 文件
上传组件封装
针对复杂业务需求，可考虑抽离通用组件以提高复用率[^4]。例如创建一个支持拖拽、预览等功能的
上传控件。
核心
思路如下：
- 支持单选/多选模式；
- 显示进度条反馈状态；
- 集成取消按钮以便中断当前任务。
简化版模板结构：
```
html
<template>
<div class="uploader">
<input type="file" @change="onInputChange"/>
<button v-if="!isUploading">开始</button>
<span>{{ progress }}%</span>
</div>
</template>
<script lang="ts">
export default defineComponent({
setup() {
let isUploading = ref(false);
let progress = ref(0);
const onInputChange = (event: Event) => {
const target = event.target as
HTMLInputElement;
const files = Array.from(target.files || []);
if (!files.length) return;
const formData = new FormData();
files.forEach(f => formData.append('images[]', f));
isUploading.value = true;
axios.post('/api/upload', formData, {
headers: {'Content-Type': 'multipart/form-data'},
onUploadProgress: pEvent => {
progress.value = Math.round((pEvent.loaded * 100) / pEvent.total);
},
})
.finally(() => isUploading.value = false);
};
return { onInputChange, isUploading, progress };
}
})
</script>
```
---
#### 总结
以上列举了几种主流的技术手段及其应用场景，具体选用哪种取决于项目的规模与目标群体特性。无论采取何种路径都应注重细节打磨，从而构建稳定可靠的
解决方案。
扫一扫
819
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
