使用VUE2和node.js来实现前后端分离的图片上传

前端：vue2

需要配置：axios  element 

1.在main.js里配置 axios和element

代码需要使用ele里的上传组件

组件有一个必要属性：

actions 里写的是协议域名端口号和后端的上传图片接口 

:on-success="success" 事件是把图片的路径赋值给表单data里的path上

<template>
  <div>
    <el-form ref="form" :model="addform" label-width="80px">
      <el-form-item label="账号">
        <el-input v-model="addform.account"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="addform.password"></el-input>
      </el-form-item>
    </el-form>
    <p>头像：
      <el-upload action="http://localhost:3000/doupload" :on-success="success">
        <el-button size="small" type="primary">点击上传</el-button>
      </el-upload>
    </p>
    <p>
      <el-button @click="zhuce">注册</el-button>
    </p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      addform: {
        account: '',
        password: '',
        path: ''
      },
    }
  },
  methods: {
    //上传
    success(res) {
     this.addform.path=res.path
    },
    //注册
    async zhuce(){
      let {data:{code,msg}}=await this.axios.post('/zhuce',this.addform)
      
    }
  }
}
</script>

<style></style>

后端：

需要配置 ：cors  multiparty

首先在配置进行跨域配置 

2.新建一个upload的文件夹（存储的是上传图片和文件）

3.配置上传图片的路径

4.在接口页面进行导入模块（muliparty）

5.编写后端上传接口

//上传
router.post('/doupload',(req,res)=>{
//配置multiparty所需要的资源
//创建multiparty的表单对象
  let form =new multiparty.Form()
//为multiparty配置上传目录
  form.uploadDir='upload'
//解析上传数据
  form.parse(req,(err,formdata,imgdata)=>{
//formdata是除了图片以外的表单数据
//imgdata是表单图片数据
    console.log(imgdata); 
    res.send({
      code:200,
      path:imgdata.file[0].path,
    })
  })
})

6.

这就实现图片上传啦