0
0

使用 element ui 上传文件图片的方法 和 后台要如何获取并保c存到对应文件夹中

  1.   1. 在action 添加 要上传的路由地址
  3.   2.使用data属性向路由提交 数据
  5.   3.后台使用path malter第三方插件 存储图片 可以使用图片原有的名称
  7.   4.使用formilder 第三方插件

一、element ui 上传图片

  1. 在action 添加 要上传的路由地址

2.使用data属性上传files 数据

3.这样就可以上传图片了。之后就是后台怎么获取文件和保存

  1. <template>
  2.   <el-upload
  3.     class="upload-demo"
  4.     :action="uploadUrl"
  5.     :on-preview="handlePreview"
  6.     :on-remove="handleRemove"
  7.     :file-list="fileList"
  8.     :headers="headerObj"
  9.     list-type="picture"
  10.     :data="file"
  11.   >
  12.     <el-button size="small" type="primary">点击上传</el-button>
  13.   </el-upload>
  14. </template>
  1. <script>
  2. export default {
  3.   data() {
  4.     return {
  5.       headerObj: {
  6.         file:'',
  7.         Authorization: window.sessionStorage.getItem("token"),
  8.       },
  9.       //1.配置要上传文件的路由
  10.       uploadUrl: "http://localhost:3000/upload",
  11.       fileList: [],
  12.     };
  13.   },
  14.   methods: {
  15.     // 处理图片的操作
  16.     handleRemove(file, fileList) {
  17.       console.log(file, fileList);
  18.      //2.data属性的值 要提交的post 路由的数据 file 图片数据
  19.       this.file=file
  20.     },
  21.     // 处理图片的效果
  22.     handlePreview(file) {
  23.       console.log(file);
  24.     },
  25.   },
  26. };
  27. </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

  1. const multer  = require('multer')
  2. const path = require("path");
  3. const storage = multer.diskStorage({
  4.     destination: function (req, file, cb) {
  5.     // 上传的文件目录（文件上传以后放在哪里）
  6.         cb(null, './uploads')   
  7.     },
  8.     filename: function (req, file, cb) {
  9.         //上传的文件名字 （文件名+‘-’+时间戳+源文件的后缀名【例如：jpg/png......】）
  10.         // 可以使用图片原来的名称，但是如果名称重复了，会被覆盖
  11.         cb(null, file.fieldname + '-' + Date.now()+path.extname(file.originalname)) 
  12.     }
  13. })
  14. const upload = multer({ storage: storage })

3.路由使用

0.导入multer.js文件

  1. // 导入图片存储位置
  2. const upload = require("./multer.js");

1.在post（）内的路由添加以下代码

2.使用 req.file 获取传递过来的路径了

3.res.send()响应会你要响应的数据

upload.single('file')

  1. Router.post("/upload",upload.single('file'), (req, res) => {
  2.     res.send({ success: req.file });
  3. });

图片就出来了

方法2

使用formidable第三方插件

1.安装 formidable 库

npm install formidable -d

2.导入

const formidable = require('formidable')

const path = require('path')

3.配置

  1.  app.post('/load',tou,(req,res,next)=>{
  2.       //创建一个form表单对象
  3.        const form = new formidable.IncomingForm()
  4.            form.encoding = 'utf-8'; //设置编码格式
  5.            form.options.keepExtensions = true //保留后缀名
  6.            // 设置文件上传文件夹/路径，__dirname是一个常量，为当前路径
  7.            var uploadDir = path.join(__dirname, "./public/load");
  8.            form.uploadDir = uploadDir;  //本地文件夹目录路径
  9.            console.log(form.uploadDir);
  10.          next()
  11.           form.parse(req,(err,fields,files) => {
  12.               console.log(files);
  13.           })
  14.  })

注意next不写。文件目录结构

前端html代码

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.     </head>
  7.     <body>
  8.         <form class="form-container" id="form" enctype="multipart/form-data">
  9.             <div class="form-group">
  10.                 <label>商品名称</label>
  11.                 <input type="text" name="p_name" class="form-control" placeholder="请输入商品名称">
  12.             </div>
  13.             <div class="form-group">
  14.                 <label>商品价格</label>
  15.                 <input type="text" name="price" class="form-control" placeholder="请输入商品价格">
  16.             </div>
  17.             <div class="form-group">
  18.                 <label>商品描述</label>
  20.                 <textarea name="p_describe" id="" cols="30" rows="10" class="p_describe form-control"></textarea>
  21.             </div>
  23.             <div class="form-group">
  24.                 <label>商品图片</label>
  25.                 <input type="file" name="img_src" class="form-contro " id="file_input">
  26.                 <img src="" alt="" id="result" style=" max-width: 500px; vertical-align: middle;">
  27.             </div>
  29.             <div class="form-group">
  30.                 <label>角色</label>
  31.                 <select name="c_id" class="form-control">
  32.                     <option selected value="0">手办</option>
  33.                     <option value="1">服装</option>
  34.                 </select>
  35.             </div>
  37.             <!-- 用户状态 -->
  38.             <!-- <div class="form-group">
  39.                             <label>状态</label>
  40.                             <select name="status" class="form-control">
  41.                                 <option selected value="1">正常</option>
  42.                                 <option value="2">禁用</option>
  43.                             </select>
  44.                         </div> -->
  46.             <div class="buttons" id="ti">
  47.                 <input type="button" class="btn btn-primary submit" value="提交">
  48.                 <span style="margin-left: 10px;color:aquamarine" id="span2"></span>
  49.             </div>
  50.         </form>
  52.     </body>
  53. </html>
  54.  <script> 
  55.     window.addEventListener('load', function (params) {
  57.        
  58.       
  59.         var result = document.getElementById("result");
  60.         var input = document.getElementById("file_input");
  62.         if (typeof FileReader === 'undefined') {
  63.             result.innerHTML = "抱歉，你的浏览器不支持 FileReader";
  64.             input.setAttribute('disabled', 'disabled');
  65.         } else {
  66.             input.addEventListener('change', readFile, false);
  67.         }
  69.         function readFile() {
  70.             // 第一步：获取文件
  71.             var file = this.files[0];
  72.             if (!/image\/\w+/.test(file.type)) {
  73.                 alert("文件必须为图片！");
  74.                 return false;
  75.             }
  76.              // 使用FileReader读取文件
  77.             var reader = new FileReader();
  78.               // 第二步：读取文件
  79.             reader.readAsDataURL(file);
  81.             // 第三步：将读取完的结果赋给页面上的img标签
  82.             reader.onload = function (e) {
  83.                 result.src =   this.result  
  84.             }
  85.         }
  87.         var submit = document.querySelector('.submit')
  88.         var form1 = document.querySelector('#form')
  90.         
  91.         submit.addEventListener('click', (e) => {
  93.             var formData = new FormData(form1)//dom对象form1
  94.             let xhr = new XMLHttpRequest()
  95.             xhr.open("post", 'http://localhost:3333/load',)
  96.             xhr.send(formData)
  97.             xhr.onload = function () {
  98.                 console.log(1);
  99.                 //根据对象http状态进行判断
  100.                 if (xhr.status == 200) {
  101.                     // console.log(xhr.responseText);
  102.                     // location = "./goods.html"
  103.                 }
  104.             }
  106.         })
  108.     })
  109.     //   http://localhost:3333/aa.html
  110. </script>

后端完整代码

  1. const express = require('express')
  2. const app = express()
  3. app.use(express.static('public'))
  5. // //注册body-parser
  6. // const parser = require('body-parser')
  7. // app.use(parser.urlencoded({ extended: false }))
  9. function tou(req, res, next) {
  10.     // 允许那些客户端可以访问(跨域请求)，get为get请求，post为post请求，*为全都可以
  11.     //允许跨域操作的具体域名
  12.     res.header("Access-Control-Allow-Origin", "*")
  13.     // 允许客户端使用那些请求方法  允许跨域的HTTP方法
  14.     res.header('Access-Control-Allow-Methods', "GET,POST")
  15.     // 允许客户端请求的同时携带cookie信息
  16.     res.header('Access-Control-Allow-Credentials', "true")
  17.     next()
  18. }
  20. const cors = require('cors')
  21. app.use(cors())
  23.  const formidable = require('formidable')
  24.  const path = require('path')
  26.  
  27.  app.post('/load',tou,(req,res,next)=>{
  28.      console.log(1112);
  29.      //创建一个form表单对象
  30.        const form = new formidable.IncomingForm()
  31.            form.encoding = 'utf-8'; //设置编码格式
  32.            form.options.keepExtensions = true //保留后缀名
  33.            // 设置文件上传文件夹/路径，__dirname是一个常量，为当前路径
  34.            var uploadDir = path.join(__dirname, "./public/load");
  35.            form.uploadDir = uploadDir;  //本地文件夹目录路径
  36.            console.log(form.uploadDir);
  37.          next()
  38.           form.parse(req,(err,fields,files) => {
  39.               console.log(files);
  40.           })
  41.  })
  43.  
  44.    
  46.  
  47.  
  48. const port = 3333
  49. app.listen(port, () => {
  50.     console.log(port)
  51. })
标签： javascript 前端 elementui
本文转载自: https://blog.csdn.net/weixin_50582284/article/details/126843974
版权归原作者 @饭团 所有， 如有侵权，请联系我们删除。
登录后发布评论

“使用 element ui 上传文件图片的方法 和 后台要如何获取并保c存到对应文件夹中”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？