vue 实现 文件上传
使用 Vue 实现文件上传
基础文件上传实现
在 Vue 中实现文件上传可以通过原生 HTML 的 <input type="file"> 元素结合 Vue 的事件处理来完成。以下是一个基本的实现示例：
<template>
<div>
<input type="file" @change="handleFileUpload" />
<button @click="uploadFile">上传文件</button>
</div>
</template>
<script>
export default {
data() {
return {
file: null
};
},
methods: {
handleFileUpload(event) {
this.file = event.target.files[0];
},
uploadFile() {
if (!this.file) {
alert('请选择文件');
return;
}
const formData = new FormData();
formData.append('file', this.file);
// 替换为你的上传 API 地址
fetch('https://your-api-endpoint.com/upload', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
console.log('上传成功:', data);
})
.catch(error => {
console.error('上传失败:', error);
});
}
}
};
</script>使用 Axios 进行文件上传
对于更复杂的应用，推荐使用 Axios 库来处理 HTTP 请求：
<template>
<div>
<input type="file" @change="handleFileUpload" />
<button @click="uploadFile">上传文件</button>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
file: null
};
},
methods: {
handleFileUpload(event) {
this.file = event.target.files[0];
},
async uploadFile() {
if (!this.file) {
alert('请选择文件');
return;
}
const formData = new FormData();
formData.append('file', this.file);
try {
const response = await axios.post('https://your-api-endpoint.com/upload', formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
});
console.log('上传成功:', response.data);
} catch (error) {
console.error('上传失败:', error);
}
}
}
};
</script>添加进度显示
可以通过 Axios 的 onUploadProgress 回调来显示上传进度：
<template>
<div>
<input type="file" @change="handleFileUpload" />
<button @click="uploadFile">上传文件</button>
<div v-if="progress > 0">
上传进度: {{ progress }}%
<progress :value="progress" max="100"></progress>
</div>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
file: null,
progress: 0
};
},
methods: {
handleFileUpload(event) {
this.file = event.target.files[0];
this.progress = 0;
},
async uploadFile() {
if (!this.file) {
alert('请选择文件');
return;
}
const formData = new FormData();
formData.append('file', this.file);
try {
const response = await axios.post('https://your-api-endpoint.com/upload', formData, {
headers: {
'Content-Type': 'multipart/form-data'
},
onUploadProgress: (progressEvent) => {
this.progress = Math.round(
(progressEvent.loaded * 100) / progressEvent.total
);
}
});
console.log('上传成功:', response.data);
} catch (error) {
console.error('上传失败:', error);
}
}
}
};
</script>多文件上传实现
如果需要支持多文件上传，可以修改 input 元素的 multiple 属性并调整处理方法：
<template>
<div>
<input type="file" multiple @change="handleFileUpload" />
<button @click="uploadFiles">上传文件</button>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
files: []
};
},
methods: {
handleFileUpload(event) {
this.files = Array.from(event.target.files);
},
async uploadFiles() {
if (this.files.length === 0) {
alert('请选择文件');
return;
}
const formData = new FormData();
this.files.forEach(file => {
formData.append('files[]', file);
});
try {
const response = await axios.post('https://your-api-endpoint.com/upload', formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
});
console.log('上传成功:', response.data);
} catch (error) {
console.error('上传失败:', error);
}
}
}
};
</script>使用第三方组件
对于更复杂的需求，可以考虑使用专门的文件上传组件如 vue-dropzone 或 vue-upload-component。以 vue-upload-component 为例：
安装依赖：
npm install vue-upload-component使用示例：
<template>
<div>
<file-upload
ref="upload"
v-model="files"
post-action="https://your-api-endpoint.com/upload"
@input-filter="inputFilter"
@input-file="inputFile"
>
上传文件
</file-upload>
<button @click="upload">开始上传</button>
</div>
</template>
<script>
import FileUpload from 'vue-upload-component';
export default {
components: {
FileUpload
},
data() {
return {
files: []
};
},
methods: {
inputFilter(newFile, oldFile, prevent) {
if (newFile.size > 1024 * 1024 * 10) {
return prevent();
}
},
inputFile(newFile, oldFile) {
console.log('文件变化:', newFile, oldFile);
},
upload() {
this.$refs.upload.active = true;
}
}
};
</script>这些方法涵盖了从基础到高级的文件上传实现，可以根据项目需求选择适合的方案。
