在Nuxt.js中使用fetch上传文件和表单数据可以通过以下步骤实现:
import fetch from 'node-fetch';
methods: {
async uploadFileAndFormData() {
const formData = new FormData();
formData.append('file', this.file); // 添加文件到表单数据
formData.append('name', this.name); // 添加其他表单数据
try {
const response = await fetch('/api/upload', {
method: 'POST',
body: formData
});
if (response.ok) {
// 上传成功
console.log('文件上传成功');
} else {
// 上传失败
console.error('文件上传失败');
}
} catch (error) {
console.error('请求错误', error);
}
}
}
<template>
<div>
<input type="file" @change="file = $event.target.files[0]" />
<input type="text" v-model="name" />
<button @click="uploadFileAndFormData">上传</button>
</div>
</template>
在上述代码中,file
和name
是用来存储文件和表单数据的响应式数据。
以上是在Nuxt.js中使用fetch上传文件和表单数据的基本步骤。根据具体的需求,你可能需要对代码进行适当的修改和扩展。
领取专属 10元无门槛券
手把手带您无忧上云