如何实现vueuse file upload？

在Vue项目中实现文件上传是一个常见的需求,而vueuse提供了一些实用的工具和方法来简化这个过程，下面我们就来详细了解一下如何利用vueuse实现file upload。

安装vueuse

你需要在你的Vue项目中安装vueuse,可以通过npm或者yarn来进行安装，比如使用npm的话，命令是：npm install @vueuse/core，安装完成后，就可以在项目中引入相关的功能了。

基本的文件上传操作

vueuse提供了一些响应式的工具函数,我们可以利用ref来创建一个响应式的变量来存储选择的文件。

import { ref } from 'vue';
import { useEventListener } from '@vueuse/core';
const file = ref(null);
const handleFileChange = (e) => {
file.value = e.target.files[0];
};
useEventListener('input', handleFileChange, { target: document.getElementById('fileInput') });

这里通过useEventListener监听input事件,当用户选择文件后，将文件存储在file这个ref变量中。

上传文件到服务器

当获取到文件后,就需要将其上传到服务器，可以使用fetch或者axios等工具，假设我们使用axios：

import axios from 'axios';
const uploadFile = async () => {
if (file.value) {
const formData = new FormData();
formData.append('file', file.value);
try {
const response = await axios.post('/upload', formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
});
console.log('文件上传成功', response.data);
} catch (error) {
console.error('文件上传失败', error);
}
}
};

这里创建了FormData对象,将文件添加进去，然后通过axios发送post请求到服务器的/upload接口（具体接口根据实际情况而定）。

处理上传进度

vueuse还可以帮助我们处理上传进度,可以利用useIntervalFn来定时获取上传进度。

import { useIntervalFn } from '@vueuse/core';
let progress = 0;
const { pause, resume } = useIntervalFn(async () => {
// 假设服务器返回进度信息的接口是 /upload/progress
const response = await axios.get('/upload/progress');
progress = response.data.progress;
console.log('上传进度：', progress);
}, 1000);
const startUpload = () => {
resume();
uploadFile();
};
const stopUpload = () => {
pause();
};

这里通过useIntervalFn每隔1秒获取一次上传进度（实际中服务器接口需要支持返回进度信息），并且可以通过pause和resume来控制进度获取的暂停和继续。

错误处理和用户反馈

在文件上传过程中,可能会遇到各种错误，比如文件过大、网络问题等，我们要做好错误处理，并给用户友好的反馈。

const handleError = (error) => {
  if (error.response && error.response.status === 413) {
    alert('文件过大，请选择较小的文件');
  } else {
    alert('文件上传出现错误，请稍后重试');
  }
};

在axios的catch中调用handleError函数,根据不同的错误状态码给用户不同的提示。

优化和扩展

为了提升用户体验,可以添加一些优化，比如在上传前对文件类型进行校验：

const allowedTypes = ['image/jpeg', 'image/png'];
const isValidFileType = (file) => {
  return allowedTypes.includes(file.type);
};
const handleFileChange = (e) => {
const selectedFile = e.target.files[0];
if (isValidFileType(selectedFile)) {
file.value = selectedFile;
} else {
alert('请选择正确类型的文件（jpg或png）');
}
};

还可以扩展功能,比如支持多文件上传，只需要将file变量改为数组，在handleFileChange中处理多个文件的选择，在上传时循环上传即可。

通过以上步骤,我们就可以利用vueuse较为完善地实现file upload功能，从文件选择、上传到服务器、处理进度、错误反馈以及优化扩展等方面都进行了考虑，能够满足一般项目中的文件上传需求，在实际项目中，还需要根据具体的业务场景和服务器接口进行进一步的调整和完善。