vue实现上传.bin文件到后台
时间: 2024-01-25 19:03:31 浏览: 76
可以使用Vue.js配合axios库实现上传.bin文件到后台。具体步骤如下:
1. 在Vue.js中添加一个文件上传的input框,并添加一个v-model指令来绑定选中的文件:
```
<template>
<div>
<input type="file" ref="fileInput" v-model="file">
</div>
</template>
<script>
export default {
data() {
return {
file: null
}
}
}
</script>
```
2. 在Vue.js中添加一个按钮,并绑定一个上传文件的方法:
```
<template>
<div>
<input type="file" ref="fileInput" v-model="file">
<button @click="uploadFile">上传</button>
</div>
</template>
<script>
import axios from 'axios'
export default {
data() {
return {
file: null
}
},
methods: {
uploadFile() {
let formData = new FormData()
formData.append('file', this.file)
axios.post('/upload', formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
}).then(response => {
console.log(response)
})
}
}
}
</script>
```
3. 在后台服务器端接收文件并保存:
```
const express = require('express')
const app = express()
const multer = require('multer')
const upload = multer({ dest: 'uploads/' })
app.post('/upload', upload.single('file'), (req, res) => {
console.log(req.file)
res.send('文件上传成功')
})
app.listen(3000, () => {
console.log('服务器已启动')
})
```
在上述代码中,使用multer中间件来接收上传的文件,并保存到指定的目录下。
这样就可以实现Vue.js上传.bin文件到后台的功能了。
阅读全文