0
点赞
收藏
分享

微信扫一扫

vue+nodejs实现图片上传并顺序浏览

静悠 2022-01-06 阅读 49

话说前面,此篇是为了给我个人笔记,也给朋友们做个思路参考

前端部分用了vue+elementUI

后端部分用了nodejs,expre

ss框架,multer中间件,cors中间件消除跨域

想了半天不知道咋写 直接贴代码吧

前端部分

<template>
<div>
<el-upload
ref="upload"
action="http://119.91.217.109:8887/upload"
list-type="picture-card"
:auto-upload="false"
multiple
:file-list="fileList"
:on-success="handleSuccess"
:before-upload="beforeUpload"
>
<i slot="default" class="el-icon-plus"></i>
<div slot="file" slot-scope="{ file }">
<img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
<span class="el-upload-list__item-actions">
<span
class="el-upload-list__item-preview"
@click="handlePictureCardPreview(file)"
>
<i class="el-icon-zoom-in"></i>
</span>
<span
v-if="!disabled"
class="el-upload-list__item-delete"
@click="handleDownload(file)"
>
<i class="el-icon-download"></i>
</span>
<span
v-if="!disabled"
class="el-upload-list__item-delete"
@click="handleRemove(file)"
>
<i class="el-icon-delete"></i>
</span>
</span>
</div>

<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="" />
</el-dialog>
</el-upload>
<el-button
style="margin-left: 10px"
size="small"
type="success"
@click="submitUpload()"
>上传到服务器</el-button
>
<el-button
type="text"
@click="dialogVisible = true"
v-show="resListSql != 0"
>查看截图预览</el-button
>

<!-- 取消了lazy 流量会爆增 -->
<el-dialog title="编号" :visible.sync="dialogVisible" width="70%">
<el-image
v-for="url in resListSql"
:key="url"
:src="`http://119.91.217.109:8887/${url}.jpg`"
class="demo-image__lazy"
></el-image>
</el-dialog>
</div>
</template>

<script>
export default {
data() {
return {
// 自减用,用于全部减完以后提示
fileList: [],
// 返回数据的数据
resList: [],
// 处理好 响应可以上传的数据
resListSql: [],
sizeList: [],

dialogImageUrl: "",
dialogVisible: false,
disabled: false,
};
},
methods: {
//清除 覆盖
cover() {
this.resListSql = [];
},

// 上传前钩子,获取上传前的数据
beforeUpload(file) {
this.sizeList.push(file.size);
this.cover();
},
//res 是上传后的返回数据
//file 是当前图片信息
//fileList 是图片数组对象

handleSuccess(res, file, fileList) {
//赋值现在的数据给data的fileList
this.fileList = fileList;
//把每个图片上传成功后的数据(文件名,文件大小size)放进resList存进数据库
this.resList.unshift(res);
//获取这次上传的图片数据在数组里的位置
let index = this.fileList.indexOf(file);
// 上传成功,删除该张图片的数据
this.fileList.splice(index, 1);
// 删到最后一个的时候提示上传成功
if (this.fileList.length === 0) {
//把获取到的相应数据放回待上传到数据库的变量中
this.$message.success(`上传成功,共上传了${this.resList.length}张图片`);
// 正确顺序的列表
console.log(this.resListSql);
this.sizeList.forEach((itme) => {
for (let i = 0; i < this.resList.length; i++) {
if (itme == this.resList[i][1]) {
this.resListSql.push(`${this.resList[i][0]}`);
}
}
});
//清空数据
this.resList = [];
this.sizeList = [];
}
},
handleRemove(file) {
console.log(file);
console.log(this.fileList);
},
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
handleDownload(file) {
console.log(file);
},
submitUpload() {
this.$refs.upload.submit();
},
},
};
</script>

<style>
.demo-image__lazy {
/* overflow: scroll; */
width: 1300px;
height: 700px;
}
</style>

后端nodejs服务器端部分

let express = require('express');
let multer = require('multer');
let fs = require("fs");
const cors = require('cors')
const app = express()


app.use(cors());



app.get('/upload', function (req, res) {
res.send("11")
})

app.post('/upload', multer({
//设置文件存储路径
dest: "upload"
}).array('file', 500), function (req, res, next) { //这里10表示最大支持的文件上传数目
let files = req.files;
fileInfos = [];
if (files.length === 0) {
res.render("error", { message: "上传文件不能为空!" });
return
} else {

for (var i in files) {
let file = files[i];

const name = Date.now()
fs.renameSync('./upload/' + file.filename, './upload/' + name + '.jpg');//这里修改文件名。
//获取文件基本信息
fileInfos.push(name, file.size);
console.log(fileInfos[0] + '.jpg');
}
// 设置响应类型及编码
// res.set({
// 'content-type': 'application/json; charset=utf-8'
// });
// console.log(fileInfos);
res.send(fileInfos);
}
});

app.use(express.static("upload"));

app.listen(8887, () => {
console.log("启动成功 8887端口")
});
举报

相关推荐

0 条评论