vue上传图片

/**

 * 上传图片 post请求 upload

 * 说明：

 *  1.后台安装 multer 模块   同时引入fs模块

 *  2.router.js入口文件导入模块

 *      const fs=require('fs')

        const multer=require('multer')

 *  3.上传图片

 *

 */

目录

element plus组件

 1.后台安装 multer 模块   同时引入fs模块

 *  2.router.js入口文件导入模块（服务器端server）

组件代码和js部分

数据库入口（部分代码）

 *  3.上传图片

---

element plus组件

在element plus中找到合适的上传组件，拿来使用。注意别忘了导入组件（import）（components:{}），命名相应变量（data）和方法的使用（methods:{}），在服务器端建立空的文件夹当作上传图片的仓库（upload）。详细过程省略

 1.后台安装 multer 模块   同时引入fs模块

cnpm i multer -s

 *  2.router.js入口文件导入模块（服务器端server）

const fs=require('fs')

const multer=require('multer')

在后台搭建的文件下调用post请求

//post 请求表单数据
app.use(express.urlencoded({ extended: true }))

 进行接口的路径配置

不需要将方法写道index.js文件下，因为从element plus拿的组件提供了方法action

:action="url"//动态地址

但是需要在现在的组件中导入base文件

修改elm组件相应属性

组件代码和js部分

<template>
     <!-- 
      ref="upload" 获取dom元素 --upload  
      action=''    必选参数，上传的地址	string
      :on-preview="handlePreview" 点击文件列表中已上传的文件时的钩子 function(file)
      on-remove	    文件列表移除文件时的钩子	function(file, fileList)
      on-success	文件上传成功时的钩子	function(response, file, fileList)
      on-error	    文件上传失败时的钩子	function(err, file, fileList)
      on-progress	文件上传时的钩子	function(event, file, fileList)
      auto-upload	是否在选取文件后立即进行上传
      file-list	    上传的文件列表, 例如: [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}]	array

 -->
  <el-upload
    ref="uploadRef"
    class="upload-demo"
    :action="url"
    :on-success="successUpload"
    :auto-upload="false"
  >
    <template #trigger>
      <el-button type="primary">选取文件</el-button>
    </template>

    <el-button class="ml-3" type="success" @click="submitUpload">
      上传到服务器
    </el-button>

  </el-upload>
</template>

<script>
import base from "../../api/base";
    export default {
    data() {
      return {
        url:base.uploadUrl,//图片地址服务器
        fileList: []
      };
    },
    methods: {
        //点击上传按钮--submit()	手动上传文件列表
      submitUpload() {
        this.$refs.uploadRef.submit();
      },
      //上传成功函数
      successUpload(response,file,fileList){
        console.log("上传成功",response,file,fileList);
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      }
    }
  }
</script>

<style lang="scss" scoped>

</style>

数据库入口（部分代码）

const express = require("express")
const router = express.Router()
//导入数据库sqlFn("sql",[],res=>{})
const sqlFn = require("./mysql")
//图片所需要的模块
const fs=require('fs')
const multer=require('multer')
 
var storage = multer.diskStorage({
            destination: function (req, file, cb) {
                cb(null, "./upload/")
            },
            filename: function (req, file, cb) {
                cb(null, Date.now() + "-" + file.originalname)
            }
        })
        
        var createFolder = function (folder) {
            try {
                fs.accessSync(folder);
            } catch (e) {
                fs.mkdirSync(folder);
            }
        }
        
        var uploadFolder = './upload/';
        createFolder(uploadFolder);
        var upload = multer({
            storage: storage
        });
        
        router.post('/upload', upload.single('file'), function (req, res, next) {
            var file = req.file;
            console.log('文件类型：%s', file.mimetype);
            console.log('原始文件名：%s', file.originalname);
            console.log('文件大小：%s', file.size);
            console.log('文件保存路径：%s', file.path);
            res.json({
                res_code: '0',
                name: file.originalname,
                url: file.path
            });
        });

 *  3.上传图片