我们先看一下效果图
首先，我利用了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="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: {
// Paths
assetsSubDirectory: '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~
