vue+nodejs实现文件上传

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了vue+nodejs实现文件上传，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1187字，纯文字阅读大概需要2分钟。

内容图文

前端:

<input type="file" name="file" @change="changeFile" ref="file">
    <el-button @click="submit">提交</el-button>
<!------------------------------------------------------------>
<script>
export default{
    data(){
        return{
            file:''
        }
    },
    methods:{
        async submit(){
            if(this.file=='')
            this.$message.warning('请上传文件');
            else{
                const formData = new FormData();
                formData.append('file',this.file);
                await this.$axios.post('http://localhost:3000/upload',formData)
                .then(()=>{this.$message.success('上传成功')})
                .catch(()=>{this.$message.error('上传失败')});
            }
        },
        changeFile(){
            this.file=this.$refs.file.files[0];
        }
    }
}    
</script>

后端nodejs 需要用到express框架和multer模块

const express = require('express');
const multer = require('multer');
var app = express();
//存放文件的文件夹路径，不存在会自动创建
const upload = multer({dest:'../upload'});
app.post('/upload',upload.single('file'),(req,res)=>{
    res.send();
})
app.listen(3000);

此处因为同源策略，需要跨域
跨域方法请看https://blog.csdn.net/lyy18719172450/article/details/115255806?spm=1001.2014.3001.5501
上传成功会在目录下创建一个文件夹

至此上传功能已经完成，但是文件还是个二进制的文件，详细解决请看https://segmentfault.com/a/1190000020467289?utm_source=tag-newest

内容总结

以上是互联网集市为您收集整理的vue+nodejs实现文件上传全部内容，希望文章能够帮你解决vue+nodejs实现文件上传所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---