说明

element-ui的Upload组件可以帮助我们上传我们的图片到我们的服务器,可以使用action参数上传图片,也可以使用http-request自定义上传方式。这里我们使用自定义的方式上传。

前端代码

我们只是自定义了一个 upload方法,里面进行发送我们的请求,使用了FormData对象,它将数据编译成键值对,其主要用于发送表单数据。

<template>
<div id="app">
<h3>头像上传</h3>
<el-upload
class="avatar-uploader"
action="http://localhost:3003/upLoad"
:show-file-list="false"
:http-request="upload"
>
<img v-if="imageUrl" :src="imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</div>
</template>
<script>
methods:{
upload(f){ let formData = new FormData()
formData.append('file', f.file) axios({
method: 'post',
url: 'http://localhost:3003/upLoad',
data:formData
}).then(res =>{
//上传成功之后 显示图片
this.imageUrl = res.data.url
})
}
}
</script>

后台代码

  • node + express

//app文件
const express = require('express')
const app = express() //解决跨域
app.all('*',function (req, res, next) {
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With');
res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');
if (req.method == 'OPTIONS') {
res.send(200);
}else {
next();
}
}); //引入router.js路由文件
const router = require('./router/router.js') //暴漏静态资源文件 暴漏之后我们可以通过域名访问该文件下的资源
app.use(express.static('upload')) app.use(router) app.listen(3003, function(){
console.log('已经创建好服务器,可以连接了...')
})
  • router文件

    这里使用了multer中文文档中间件,处理我们上传的图片,storage配置了图片的存储路径,以及文件名和后缀名。在路由 upLoad中使用 upload.single('file') 获得我们存储的信息,这里的fileFormData的 键 一致。之后返回服务器存储图片的地址返回给客户端即可。

 //router.js文件
const express = require('express')
const router = express.Router()
const multer = require('multer') //上传的文件保存在 upload
const storage = multer.diskStorage({
//存储的位置
destination(req, file, cb){
cb(null, 'upload/')
},
//文件名字的确定 multer默认帮我们取一个没有扩展名的文件名,因此需要我们自己定义
filename(req, file, cb){
cb(null, Date.now() + file.originalname)
}
}) //传入storage 除了这个参数我们还可以传入dest等参数
const upload = multer({storage})
router.post('/upLoad', upload.single('file'), (req, res) =>{ //给客户端返回图片的访问地址 域名 + 文件名字
//因为在 app.js文件里面我们已经向外暴漏了存储图片的文件夹 uploa
const url = 'http://localhost:3003/' + req.file.filename
res.json({url})
})

node + multer存储element-ui上传的图片的更多相关文章

  1. element ui 上传文件,读取内容乱码解决

    element ui 上传文件,读取内容乱码解决: 加第二个参数 reader.readAsText(file.raw,'gb2312'); <el-upload class="upl ...

  2. Element ui 上传文件组件(单文件上传) 点击提交 没反应

    element ui 第一次上传文件后 上传其他文件再次点击不再次提交 需要使用 clearFiles 清空已上传文件列表 这时候在次点击 上传按钮 就会惊喜的发现 可以上传了使用方法 this.$r ...

  3. element UI 上传文件成功后 - 清空文件

    request({ url: '/jiekou', method: 'post', data }).then(res => { this.$message({ type: 'success', ...

  4. vue element ui 上传 请求接口

    在页面上 http-request: 覆盖默认的上传行为,可以自定义上传的实现 <el-upload  class="avatar-uploader"  action=&qu ...

  5. node应用通过multer模块实现文件上传

    multer用于处理文件上传的nodejs中间件,主要跟express框架搭配使用,只支持表单MIME编码为multipart/form-data类型的数据请求. 如果要处理其他编码的表单数据可以通过 ...

  6. nodejs-使用multer实现多张图片上传,express搭建脚手架

    nodejs-使用multer实现多张图片上传,express搭建脚手架 在工作中,我们经常会看到用户有多张图片上传,并且预览展示的需求.那么在具体实现中又该怎么做呢? 本实例需要nodejs基础,本 ...

  7. SpringBoot 整合文件上传 elment Ui 上传组件

    SpringBoot 整合文件上传 elment Ui 上传组件 本文章记录 自己学习使用 侵权必删! 前端代码 博主最近在学 elment Ui 所以 前端使用 elmentUi 的 upload ...

  8. vue中element 的上传功能

    element 的上传功能 最近有个需求,需要在上传文件前,可以进行弹窗控制是否上传upload 看完文档后,感觉有两种思路可以实现 基于before-upload :上传文件之前的钩子,参数为上传的 ...

  9. selenium -文件上传的实现 -对于含有input element的上传

    使用selenium做自动化时,我们经常会遇到的一个让人头疼的问题就是文件上传. 问题的难点在于selenium无法识别并操作Windows窗口,若我们可以绕过弹出框直接把文件信息上传给选择按钮,难点 ...

随机推荐

  1. $CF311B\ Cats\ Transport$ 斜率优化

    AcWing Description Sol 设f[i][j]表示前i个饲养员接走前j只猫咪的最小等待时间. 要接到j猫咪,饲养员的最早出发时间是可求的,设为d: $ d[j]=Tj-\sum_{k= ...

  2. JAVA8学习——深入Comparator&Collector(学习过程)

    深入Comparator&Collector 从源码深入Comparator Comparator从Java1.2就出来了,但是在1.8的时候,又添加了大量的默认方法. compare() e ...

  3. 安装 redis

    官方下载地址:http://redis.io/download,但是官方没有64位的Windows下的可执行程序. 目前有个开源的托管在github上, 地址:https://github.com/S ...

  4. PHP 转化 Excel导入时间

    $fixation = 25569; $fixationT = 24 * 60 * 60; $date = gmdate('Y-m-d H:i:s', ('excel导入的时间'- $fixation ...

  5. 常见的sql注入环境搭建

    常见的sql注入环境搭建 By : Mirror王宇阳 Time:2020-01-06 PHP+MySQL摘要 $conn = new mysqli('数据库服务器','username','pass ...

  6. Ant Design Pro中Transfer穿梭框的实际用法(与后端交互)

    Ant Design Pro中Transfer穿梭框的实际用法(与后端交互) 该控件的属性以及属性的作用在ADP的官方文档中都有介绍,但没有讲如何与后端交互,本文旨在讲解该控件与后端的交互. Ant ...

  7. python文件及目录操作

    python文件及目录操作 读/写文件 新建/打开文件 写入 #举个例子,打开D:\test\data.txt #以写入模式打开文件 #如果test(上级目录)不存在则报错 #如果data.txt(文 ...

  8. Mybatis-plus 实体类继承关系 插入默认值

    在实际开发中,会定义一些公共字段,而这些公共字段,一般都是在进行操作的时候由程序自动将默认值插入.而公共的字段一般会被封装到一个基础的实体类中,同时实体类中会实现相应的getter setter 方法 ...

  9. 基于Netty和SpringBoot实现一个轻量级RPC框架-协议篇

    基于Netty和SpringBoot实现一个轻量级RPC框架-协议篇 前提 最近对网络编程方面比较有兴趣,在微服务实践上也用到了相对主流的RPC框架如Spring Cloud Gateway底层也切换 ...

  10. JVM之JVM的体系结构

    一.JDK的组成 JDK:JDK是Java开发工具包,是Sun Microsystems针对Java开发员的产品.JDK中包含JRE(在JDK的安装目录下有一个名为jre的目录,里面有两个文件夹bin ...