Element ui图片上传

前言

对于广大小白来说，图片上传简直是上传难，难于上青天！废话不多说，步入正题，您就瞧好吧！

步骤一：前端使用element ui组件（upload上传）

我个人喜欢使用第二个组件：

element ui代码如下：

样式在此我不做过多解释，大家自行调试！

action（必须填写）就是我们图片要上传的地址，待会我会在下面展示我的前端实战代码

show-file-list：是否显示已上传文件列表（这句话不用删也不用管，留着即可）

before-upload ：使用 before-upload 限制用户上传的图片格式和大小。（我一般都会删除）

注意！！！

on-success很重要，这个方法是文件上传成功时的钩子，必须借助它实现功能！！！

  
  



  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

这里是我自己的图片上传前端实战代码：

我为组件添加了name属性，相当于给他加了个别名叫做img。

    
        
			
			
		
    





.avatar-uploader .el-upload {
	border: 10px dashed gold;
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
}
.avatar-uploader .el-upload:hover {
	border-color: #409eff;
}
.avatar-uploader-icon {
	border: 1px dashed gainsboro;
	font-size: 28px;
	color: #8c939d;
	width: 178px;
	height: 178px;
	line-height: 178px;
	text-align: center;
}
.avatar {
	width: 178px;
	height: 178px;
	display: block;
}

下面说一下后端代码：

注意记得创建一个upload文件夹用来存储前端存进来的静态资源嗷

const express = require('express')//通过npm i express命令下载模块并导入
const app = express()//创建实例
const multiparty = require('multiparty')//通过npm i multiparty命令下载模块并导入
app.use('/upload',express.static('upload'))//将upload文件作为静态资源文件
app.post('/upload',(req,res)=>{
    const form = new multiparty.Form()
    form.uploadDir = './upload'
    form.parse(req,(err,fields,fiels)=>{
        res.send({
            //拼接路径，我的端口号是8700
            //这里的img对象我前面定义name属性的别名img
            path:'http://127.0.0.1:8700/'+fiels.img[0].path 
        })
    })
})

const port = 8700
app.listen(port, () => console.log(`Server running at  http://127.0.0.1:${port}`))