需求背景：有多个轮播图需要单独上传，需要用data去区分上传的是哪一个轮播图
添加轮播图页面如下图所示：
实现效果：
实现思路及需要了解一下信息
①每一个轮播图应在数据库中有相对应的字段，如下所示：
需要在数据库初就考虑好，后续进行更新的时候只需找到对应的字段更新url即可
②upload组件传至后端会返回图片在后端中的url地址，只有url地址而没有对应的轮播图的信息，所以在上传时需携带data
关键点之一在于如何携带data
③在第②步中需要把图片上传至一个类似于中间件的一个数据表中，单纯用来存放图片并接收图片在系统中的url地址
④在第②步执行执行完后，可以接收到图片的url以及对应的是哪个轮播图
⑤通过第④步得到的数据，及时更新表中的数据
⑥为了减少内存，中间件数据表中的url数据应该及时清除，所以在第⑤步之后需要调用一个接口删除url
⑦为了实现第⑥步，需要给每一个上传的图片绑定一个uuid，以便传入uuid找到对应的图片进行删除
⑧获取所有的url地址进行渲染
为什么使用uuid而不用nanoid呢，这是因为nanoid不支持commonJS方式导入
总结使用了如下4个接口:
①把图片上传至中间件数据表中
②把返回的url和data插入真正的数据表中
③清除中间件数据表中的数据
④调用所有的轮播图数据进行渲染
upload组件在设置页面中的代码如下：
template部分
<div class="spider-wrapped">
<div class="spider-content">轮播图1：</div>
<!-- action 是上传的接口地址
on-success是上传成功的回调，及返回url及轮播图1的信息
auto-upload为自动上传模式
data为携带的数据
-->
<el-upload class="upload-demo"
action="http://127.0.0.1:3007/set/uploadswiper"
:on-success="onSuc" :auto-upload="true" ref="uploadRef" :data='data.l1'
:show-file-list='false'>
<template #trigger>
<!-- 为上传之前用了个雪碧图代替 -->
<img :src="swiperData.swiper1" alt="" class="swiper" v-if="!swiperData.swiper1==''">
<img src="@/assets/雪碧图.png" alt="" v-else>
</template>
</el-upload>
</div>
script部分 (组件式setup TS)
// 携带的data
const data = {
l1: '轮播图1',
}
// 轮播图地址
const swiperData = ref({
swiper1: '',
})
const onSuc = async (res) => {
// 因为返回的数据是一个对象,类型如{0: '轮', 1: '播', 2: '图', 3: '1'} 需要转化成字符串进行传参
let str = "";
for (let i = 0; i < 4; i++) {
str += res.data[i];
}
const onlyId = res.onlyId
const res1 = await addSwiper(str, res.url)
if (res1 == '添加图片成功') {
ElMessage({
message: '添加轮播图片成功',
type: 'success',
})
// 传入uuid删除中间件数据库中的数据，以免增加无用内存
await deleteSwiper(onlyId)
// 刷新页面，拿到所有的轮播图数据
getallswiper()
} else {
ElMessage.error('添加轮播图片失败，请检查网络是否通畅')
}
}
前端接口调用部分:
// 删除在image的轮播图
export const deleteSwiper = onlyId => {
return instance({
url: '/set/deleteSwiperInImage',
method: 'POST',
data:{
onlyId
}
})
}
// 添加轮播图到setting中
export const addSwiper = (set_name,set_value) => {
return instance({
url: '/set/insertSwiperInSetting',
method: 'POST',
data:{
set_name,
set_value
}
})
}
// 获取全部轮播图
export const getSwiperList = () => {
return instance({
url: '/set/getAllSwiper',
method: 'POST',
})
}
后端接口实现：
// 轮播图上传
exports.uploadswiper = (req, res) => {
const useful = '轮播图'
let oldName = req.files[0].filename;
// 新建uuid
const onlyId = crypto.randomUUID()
// 计算机上文件的名称
let originalname = req.files[0].originalname;
//给新名字加上原来的后缀
let newName = req.files[0].originalname;
//改图片的名字 renameSync为重命名
fs.renameSync('./public/upload/' + oldName, './public/upload/' + newName);
const sql = 'insert into image set ? '
db.query(sql, {
onlyId,
image_url: `http://127.0.0.1:3007/upload/${
newName}`,
useful,
}, (err, result) => {
if (err) return res.cc(err)
// 上传成功
res.send({
data:req.body,
// 返回uuid
onlyId,
err: 0,
url: "http://127.0.0.1:3007/upload/" + newName
});
})
}
// 删掉image中的轮播图
exports.deleteSwiperInImage = (req, res) => {
const userinfo = req.body
// 根据唯一的id删除
const sql = 'delete from image where onlyId = ?'
db.query(sql, userinfo.onlyId, (err, result) => {
if (err) return res.cc(err)
res.send("删除图片成功")
})
}
// 添加轮播图到setting中 字段是轮播图和setting中的名字
exports.insertSwiperInSetting = (req, res) => {
const userinfo = req.body
const sql = 'update setting set set_value = ? where set_name = ?'
db.query(sql, [userinfo.set_value,userinfo.set_name], (err, result) => {
if (err) return res.cc(err)
res.send("添加图片成功")
})
}
// 获取全部轮播图 用like字符
exports.getAllSwiper = (req, res) => {
const userinfo = req.body
// 使用了like关键字
const sql = "select * from setting where set_name like '轮播图%' "
db.query(sql,(err, result) => {
if (err) return res.cc(err)
res.send(result)
})
}