Element ui图片上传

前言

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

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

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

element ui代码如下：

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

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

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

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

注意！！！

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

<el-upload
  class="avatar-uploader"
  action="https://jsonplaceholder.typicode.com/posts/"
  :show-file-list="false"
  :on-success="handleAvatarSuccess"
  :before-upload="beforeAvatarUpload">
  <img v-if="imageUrl" :src="imageUrl" class="avatar">
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
 
<style>
  .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;
  }
</style>
 
<script>
  export default {
    data() {
      return {
        imageUrl: ''
      };
    },
    methods: {
      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;
 
        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      }
    }
  }
</script>

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

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

<template>
    <div>
        <el-upload name="img" class="avatar-uploader"             
          action="http://127.0.0.1:8700/upload"         
          :show-file-list="false" :on-success="hanadle_success">
			<img v-if="addform.img" :src="addform.img" class="avatar" />
			<i v-else class="el-icon-plus avatar-uploader-icon"></i>
		</el-upload>
    </div>
</template>
 
<script>
export default {
	name: "app",
	data() {
		return {
			addform:{
                img:''
            }
		};
	},
	methods: {
		hanadle_success(res, file, fileList) {
			this.addform.img = res.path; //实现单独上传
            
            //下面这个实现多种上传，两个都写上也没事，用不到也不报错
			const result = fileList.every((item) => item.status === "success");
			if (result) {
				fileList.map((item) => {
					item.response &&
						this.fileList.push({
							name: "",
							url: item.response.path,
						});
					return true;
				});
			}
		},
	},
};
</script>
 
<style scoped>
.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;
}
</style>

下面说一下后端代码：

注意记得创建一个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}`))