Vue、ElementUI配合Node、multiparty模块实现图片上传并反显_小demo
我们先看一下效果图
首先，我利用了Element的一个upload组件，我们可以直接使用它。
html:
<!-- 上传图片 --><el-upload<!-- 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用 -->:on-change="picChange"<!-- 是否在选取文件后立即进行上传-->:auto-upload="false"action="#"<!-- 文件列表的类型-->list-type="picture-card"<!-- 点击文件列表中已上传的文件时的钩子-->:on-preview="handlePictureCardPreview"<!-- 文件列表移除文件时的钩子-->:on-remove="handleRemove"<!-- 上传的文件列表-->:file-list="filelist"><img v-if="imageUrl" :src="data:imageUrl" class="avatar" /><i v-else class="el-icon-plus avatar-uploader-icon"></i></el-upload><!-- 从接口获取图片地址 反显 --><!-- src 不会产生跨域问题 --><img class="smallimg" v-for="item of postUrlListDate" :src="item.url" alt="图片" :key="item.url" />
data:
data() {return {postUrlListDate: [],filelist: [],img: "",imageUrl: ""};},
在接口访问的时候会出现跨域的问题 我们使用代理处理一下
这里使用的vue2 在config /index.js 中修改
如果是vue3可以在根目录下新建问vue.config.js文件配置proxy代理
dev: {// PathsassetsSubDirectory: 'static',assetsPublicPath: '/',proxyTable: {'/api': {target: 'http://localhost:3002',changeOrigin: true,pathRewrite: {'^/api': ''// /api替换为空会}}},
npm 下载axios
npm i axios
在main.js中全局挂在一下
import axios from 'axios'
Vue.prototype.$axios =axios
在页面使用this.$axios 调用axios的方法
接口调用：
methods: {picChange(file) {this.img = file.raw;//上传图片this.AxiosUp();},//移除图片handleRemove(file, fileList) {console.log(file, fileList, "file, fileList");},handlePictureCardPreview(file) {console.log(file, "file");//页面反显图片 this.imageUrl = file.url;},//上传图片信息到服务器AxiosUp() {let formL = new FormData(); //使用FormData上传文件、图片使用append向FormData对象中添加键值对formL.append("img", this.img);this.$axios.post("/api/zjq", formL).then(res => {if (res.data.success == 200) this.$alert("上传成功~");//上传成功后 再次调用获取一遍 页面图片列表刷新this.postUrlList();});},//获取图片url信息列表postUrlList() {this.$axios.post("/api/postUrlList").then(res => {this.postUrlListDate = res.data.arr;this.postUrlListDate.map(item => {item.url = "http://localhost:3002" + item.url; //后端node服务地址拼接});});}},mounted() {//页面挂在加载已经上传的图片列表this.postUrlList();}
node服务端：
使用express框架快速搭建
我们在routers/index.js中进行配置
var express = require('express');
var router = express.Router();
var fs = require('fs')
var path = require('path')
var multiparty = require("multiparty");//用于处理formData表单
//上传文件接口
router.post('/zjq', (req, res) => {var form = new multiparty.Form({ uploadDir: './public/images' });//放置路径form.parse(req, function (err, fields, files) {//...可以给图片进行换名字等操作 //files即为上传图片的信息});res.send({ success: 200 })//在正式用的时候 会将文件的路径存到数据库中
})
//获取上传的所有文件 列表
//遍历了图片文件夹 获取了当前所有文件
router.post('/postUrlList', (req, res) => {let arr = []const readDir = (entry) => {const dirInfo = fs.readdirSync(entry);//读取文件 一层 dirInfo.forEach(item => {const location = path.join(entry, item);const info = fs.statSync(location); //检查文件状态 if (info.isDirectory()) {console.log(`dir:${location}`);readDir(location); //再读取下一层文件夹的文件} else {let obj = {url: '/public/images/' + item, //拼接路径 }arr.push(obj)}})}readDir(path.join(__dirname, '../public/images'));res.send({ arr }) //返回数组
})
//图片 img.src 会用到这个接口
router.get('/public/images/:id', (req, res) => {let { id } = req.params //id 聪params中获取//在静态文件夹中查询这个文件名的文件内容 返回给前端//path.join 拼接路径//readFile读取文件的异步方法fs.readFile(path.join(__dirname, '../public/images', id), (err, data) => {if (err) throw err;res.end(data);});
})module.exports = router;读书破万 下笔有神
2021/08/17补充
fileList =[{url:可以是base64也可以是url链接}]，很nice~
Vue、ElementUI配合Node、multiparty模块实现图片上传并反显_小demo相关推荐
- vue 富文本 quill 编辑器，实现图片上传到服务器，以及实时字数统计
vue 富文本 quill 编辑器,实现图片上传到服务器,以及实时字数统计 写在前面 vue 富文本 quill / vue-quill-editor 如何使用 图片上传到服务器 实时字数统计 图片编 ...
- 基于ruoyi+vue+elementUI实现列表，新增，附件上传，tab+springBoot+mybatis+oracle序列+批量新增
基于ruoyi+vue+elementUI实现列表,新增,附件上传,tab+springBoot+mybatis+oracle序列+批量新增 页面效果 列表页面 新增页面 详情页面 代码实现 列表+新 ...
- themyleaf 图片上传_javaEE --springboot #实现图片上传和回显 #单文件上传 #多文件上传 #ajax异步文件上传 （非常详细，从创建项目开始）...
实现文件上传和回显 1.新建一个SpringBoot项目,选择 Spring Web 和 thymeleaf 依赖 .pow.xml文件下的依赖如下 2.根据下图,创建如下文件 3.直接上代码 配置文 ...
- java图片上传并解析,详解SpringMVC实现图片上传以及该注意的小细节
本篇文章主要介绍了详解SpringMVC实现图片上传以及该注意的小细节,具有一定的参考价值,感兴趣的小伙伴们可以参考一下. 先附上图片上传的代码 jsp代码如下: 
- win8系统intellij输入中文问题
- 什么叫侧面指纹识别_正面背面侧面 你手机的指纹识别长在哪?
- 6.Linux中的进程管理
- 关于maven同名jar包不同版本号的冲突问题
- 解决IDEA的maven刷新依赖时出现Connot reconnect错误
- 周易六十四卦——同人卦
- vs2019 C#提示程序未兼容
- 第十节 Java工具包-Collections 流--lambada表达式
- ubuntu16.04安装tensorflow,pytorch,gluon等