1. 在action 添加 要上传的路由地址
2.使用data属性向路由提交 数据
3.后台使用path malter第三方插件 存储图片 可以使用图片原有的名称
4.使用formilder 第三方插件
一、element ui 上传图片
- 在action 添加 要上传的路由地址
2.使用data属性上传files 数据
3.这样就可以上传图片了。之后就是后台怎么获取文件和保存
<template>
<el-upload
class="upload-demo"
:action="uploadUrl"
:on-preview="handlePreview"
:on-remove="handleRemove"
:file-list="fileList"
:headers="headerObj"
list-type="picture"
:data="file"
>
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
</template>
<script>
export default {
data() {
return {
headerObj: {
file:'',
Authorization: window.sessionStorage.getItem("token"),
},
//1.配置要上传文件的路由
uploadUrl: "http://localhost:3000/upload",
fileList: [],
};
},
methods: {
// 处理图片的操作
handleRemove(file, fileList) {
console.log(file, fileList);
//2.data属性的值 要提交的post 路由的数据 file 图片数据
this.file=file
},
// 处理图片的效果
handlePreview(file) {
console.log(file);
},
},
};
</script>
二、后台获取文件
方法1
1.后台使用path malter第三方插件 存储图片 可以使用图片原有的名称
1.安装 multer库
yarn add multer -d
npm i multer -d
2.配置方法
1.创建一个multer.js文件夹
2.配置图片的保持路径以父级为开始
列入a为根目录 ：a/ms/multer.js 存放图片的文件a/uploads
路径就为 ./uploads
const multer = require('multer')
const path = require("path");
const storage = multer.diskStorage({
destination: function (req, file, cb) {
// 上传的文件目录（文件上传以后放在哪里）
cb(null, './uploads')
},
filename: function (req, file, cb) {
//上传的文件名字 （文件名+‘-’+时间戳+源文件的后缀名【例如：jpg/png......】）
// 可以使用图片原来的名称，但是如果名称重复了，会被覆盖
cb(null, file.fieldname + '-' + Date.now()+path.extname(file.originalname))
}
})
const upload = multer({ storage: storage })
3.路由使用
0.导入multer.js文件
// 导入图片存储位置
const upload = require("./multer.js");
1.在post（）内的路由添加以下代码
2.使用 req.file 获取传递过来的路径了
3.res.send()响应会你要响应的数据
upload.single('file')
Router.post("/upload",upload.single('file'), (req, res) => {
res.send({ success: req.file });
});
图片就出来了
方法2
使用formidable第三方插件
1.安装 formidable 库
npm install formidable -d
2.导入
const formidable = require('formidable')
const path = require('path')
3.配置
app.post('/load',tou,(req,res,next)=>{
//创建一个form表单对象
const form = new formidable.IncomingForm()
form.encoding = 'utf-8'; //设置编码格式
form.options.keepExtensions = true //保留后缀名
// 设置文件上传文件夹/路径，__dirname是一个常量，为当前路径
var uploadDir = path.join(__dirname, "./public/load");
form.uploadDir = uploadDir; //本地文件夹目录路径
console.log(form.uploadDir);
next()
form.parse(req,(err,fields,files) => {
console.log(files);
})
})
注意next不写。文件目录结构
前端html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form class="form-container" id="form" enctype="multipart/form-data">
<div class="form-group">
<label>商品名称</label>
<input type="text" name="p_name" class="form-control" placeholder="请输入商品名称">
</div>
<div class="form-group">
<label>商品价格</label>
<input type="text" name="price" class="form-control" placeholder="请输入商品价格">
</div>
<div class="form-group">
<label>商品描述</label>
<textarea name="p_describe" id="" cols="30" rows="10" class="p_describe form-control"></textarea>
</div>
<div class="form-group">
<label>商品图片</label>
<input type="file" name="img_src" class="form-contro " id="file_input">
<img src="" alt="" id="result" style=" max-width: 500px; vertical-align: middle;">
</div>
<div class="form-group">
<label>角色</label>
<select name="c_id" class="form-control">
<option selected value="0">手办</option>
<option value="1">服装</option>
</select>
</div>
<!-- 用户状态 -->
<!-- <div class="form-group">
<label>状态</label>
<select name="status" class="form-control">
<option selected value="1">正常</option>
<option value="2">禁用</option>
</select>
</div> -->
<div class="buttons" id="ti">
<input type="button" class="btn btn-primary submit" value="提交">
<span style="margin-left: 10px;color:aquamarine" id="span2"></span>
</div>
</form>
</body>
</html>
<script>
window.addEventListener('load', function (params) {
var result = document.getElementById("result");
var input = document.getElementById("file_input");
if (typeof FileReader === 'undefined') {
result.innerHTML = "抱歉，你的浏览器不支持 FileReader";
input.setAttribute('disabled', 'disabled');
} else {
input.addEventListener('change', readFile, false);
}
function readFile() {
// 第一步：获取文件
var file = this.files[0];
if (!/image\/\w+/.test(file.type)) {
alert("文件必须为图片！");
return false;
}
// 使用FileReader读取文件
var reader = new FileReader();
// 第二步：读取文件
reader.readAsDataURL(file);
// 第三步：将读取完的结果赋给页面上的img标签
reader.onload = function (e) {
result.src = this.result
}
}
var submit = document.querySelector('.submit')
var form1 = document.querySelector('#form')
submit.addEventListener('click', (e) => {
var formData = new FormData(form1)//dom对象form1
let xhr = new XMLHttpRequest()
xhr.open("post", 'http://localhost:3333/load',)
xhr.send(formData)
xhr.onload = function () {
console.log(1);
//根据对象http状态进行判断
if (xhr.status == 200) {
// console.log(xhr.responseText);
// location = "./goods.html"
}
}
})
})
// http://localhost:3333/aa.html
</script>
后端完整代码
const express = require('express')
const app = express()
app.use(express.static('public'))
// //注册body-parser
// const parser = require('body-parser')
// app.use(parser.urlencoded({ extended: false }))
function tou(req, res, next) {
// 允许那些客户端可以访问(跨域请求)，get为get请求，post为post请求，*为全都可以
//允许跨域操作的具体域名
res.header("Access-Control-Allow-Origin", "*")
// 允许客户端使用那些请求方法 允许跨域的HTTP方法
res.header('Access-Control-Allow-Methods', "GET,POST")
// 允许客户端请求的同时携带cookie信息
res.header('Access-Control-Allow-Credentials', "true")
next()
}
const cors = require('cors')
app.use(cors())
const formidable = require('formidable')
const path = require('path')
app.post('/load',tou,(req,res,next)=>{
console.log(1112);
//创建一个form表单对象
const form = new formidable.IncomingForm()
form.encoding = 'utf-8'; //设置编码格式
form.options.keepExtensions = true //保留后缀名
// 设置文件上传文件夹/路径，__dirname是一个常量，为当前路径
var uploadDir = path.join(__dirname, "./public/load");
form.uploadDir = uploadDir; //本地文件夹目录路径
console.log(form.uploadDir);
next()
form.parse(req,(err,fields,files) => {
console.log(files);
})
})
const port = 3333
app.listen(port, () => {
console.log(port)
})
本文转载自: https://blog.csdn.net/weixin_50582284/article/details/126843974
版权归原作者 @饭团 所有， 如有侵权，请联系我们删除。
版权归原作者 @饭团 所有， 如有侵权，请联系我们删除。