本来是用的jeecg-vue3中的上传组件，如下图：
功能上还是蛮全的，就是上图中这个链接的代码死活找不到，查了下，是基于antv的a-upload实现的。但是antv中也没找到，上图这个只有移入删除的功能
但是我这边的需求是点击链接可以直接在网页预览，而不是下载，移入后有个删除和下载的功能按钮。
预览这个跟后端同事搞定了，通过点击文件名直接预览，但是！！！下载的按钮想加到文件名后面是死活加不上去了，真心找不到代码，无奈只能自己写一个了
先看效果图：
样式就是根据jeecg的上传组件样式模仿的，但是，我的移入比它的多了一个下载的按钮，哈哈哈哈
由于项目是基于jeecg开发的，所以如过有人用的话，大概只能作为参考
这个组件并没写的特别完善，只是针对我当前的项目需求进行了开发props
目前开放的属性有：
大家可以根据自己情况进行改造
emit('success')， 是将当前操作的fileList数据返回到父页面好进行操作处理
引用案例：
上代码：
放到了components中
wjUpload.vue:
<template>
<div class="wjUpload">
<input type="file" ref="fileInput" style="display: none" @change="handleFileChange" />
<div class="tops">
<div class="labels">
<label class="upSpan" :class="isDisabled == true ? 'noSpan' : ''">{{ fileLabel }}：</label>
</div>
<button class="upBtn" :disabled="isDisabled" @click="triggerFileSelectAndUpload">
<Icon icon="ant-design:upload-outlined" />
<span class="upBtnText">上传</span>
</button>
</div>
<div class="bottoms" v-if="fileList.length > 0">
<div class="b_items" v-for="(item, index) in fileList" :key="index">
<div class="b_i_item" @mouseover="currentIndex = index" @mouseout="currentIndex = -1">
<Icon style="margin-left: 4px" icon="ant-design:link-outlined" />
<div class="b_i_i_a" @click="ylClick(item)">
<a>{{ setNewItem(item) }}</a>
</div>
<div class="downs" v-show="currentIndex == index" @click.stop="downClick(item)">
<Icon icon="ant-design:download-outlined" />
</div>
<div class="deletes" v-show="currentIndex == index && isDisabled == false" @click.stop="deleteFileClick(item, index)">
<Icon icon="ant-design:rest-outlined" />
</div>
</div>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { computed, ref, unref, onMounted, watch } from 'vue';
import { Icon } from '/@/components/Icon';
import { setUploads, getDownFile } from './wjUp.ts';
import { getToken } from '/@/utils/auth';
import { getJiaMi } from '/@/api/common/api';
import { Bus, getYLurl, getYLurl2 } from '/@/utils/bus.js';
// 获取emit
const emit = defineEmits(['success']);
const fileInput = ref(null);
// 存放数据地址列表
const fileList = ref<Array>([]);
// 是否显示操作按钮--根据下标进行控制
const currentIndex = ref<number>(-1);
// 父页面传递的参数
const props = defineProps({
// label展示名称
fileLabel: { type: String, default: () => '文件上传' },
// 下方链接列表展示
newFileList: { type: Array, default: () => [] },
// 控制是否可以操作
isDisabled: { type: Boolean, default: () => false },
});
onMounted(() => {
watch(
() => props.newFileList,
async () => {
console.log(props.newFileList, '----------aaaaaaaaaaaa------------sssssssssss');
if (props.newFileList) {
const newArr = props.newFileList;
if (typeof newArr === 'string') {
const fileArray = newArr.split(','); // 假设你想根据逗号来分割字符串
fileList.value = fileArray;
console.log('--------');
} else {
// 处理不是字符串的情况
console.log('props.newFileList 不是一个字符串');
}
} else {
fileList.value = [];
}
},
{ deep: true, immediate: true }
);
watch(fileList, () => {
// 每当fileList发生变化，就将数据返回到父页面中
emit('success', fileList.value);
});
});
// 处理文件选择变化
const handleFileChange = (event) => {
const file = event.target.files[0];
if (file) {
uploadFile(file);
}
};
// 上传文件
const uploadFile = async (file) => {
console.log(file, '二进制');
const formData = new FormData();
formData.append('file', file);
const res = await setUploads({ file });
if (res.code == 200) {
fileList.value.push(res.result);
emit('success', fileList.value);
}
};
// 对文件路径进行处理返回文件名
const setNewItem = (item) => {
let str = item.slice(item.lastIndexOf('/') + 1);
return str;
};
// 触发文件选择并上传
const triggerFileSelectAndUpload = () => {
fileInput.value.click(); // 模拟点击文件选择按钮
};
// 监听点击文件预览
const ylClick = async (e) => {
console.log(e, '------------>');
let str = e.slice(e.lastIndexOf('/') + 1);
let token = getToken();
let ylUrl = getYLurl();
let ylUrl2 = getYLurl2();
var url = ylUrl2 + 'bcCommon/getFileStreamByLocalPath?filePath=' + e + '&fullfilename=' + str + '&XSSTOKEN=' + token; //要预览文件的访问地址
let cs_base = window.btoa(unescape(encodeURIComponent(url)));
const newUrls = await getJiaMi({ jiaMiCode: encodeURIComponent(cs_base) });
window.open(ylUrl + 'onlinePreview?url=' + newUrls);
};
// 监听点击下载按钮
const downClick = async (e) => {
console.log(e, '=========================');
// const res = await getDownFile({ filePath: e });
// console.log(res, '=->++++++++++++>');
let str = e.slice(e.lastIndexOf('/') + 1);
getDownFile({ filePath: e }).then((res) => {
console.log('res-----------', res);
let url = window.URL.createObjectURL(new Blob([res.data]));
let link = document.createElement('a');
link.style.display = 'none';
link.href = url;
link.setAttribute('download', str);
document.body.appendChild(link);
link.click();
document.body.removeChild(link); //下载完成移除元素
window.URL.revokeObjectURL(url); //释放掉blob对象
});
};
// 监听点击删除按钮
const deleteFileClick = (item, index) => {
console.log(item, index);
fileList.value.splice(index, 1);
console.log('===============>', fileList.value);
emit('success', fileList.value);
};
</script>
<style lang="less" scoped>
.wjUpload {
width: 360px;
min-height: 60px;
margin: 10px;
.tops {
width: 100%;
height: 40px;
display: flex;
align-items: center;
.labels {
width: 130px;
height: 100%;
display: flex;
align-items: center;
justify-content: flex-end;
.upSpan {
position: relative;
display: inline-flex;
align-items: center;
max-width: 100%;
height: 32px;
color: rgba(0, 0, 0, 0.85);
font-size: 13px;
margin-left: 26px;
}
}
.upBtn {
width: 84px;
height: 32px;
border: 1px solid #e5e7eb;
background-color: #fff;
.upBtnText {
font-size: 14px;
color: rgba(0, 0, 0, 0.85);
margin-left: 8px;
}
}
.upBtn:hover {
color: #40a9ff;
border-color: #40a9ff;
background: #fff;
.upBtnText {
color: #40a9ff;
}
}
.upBtn[disabled],
.upBtn[disabled]:hover,
.upBtn[disabled]:focus,
.upBtn[disabled]:active {
color: rgba(0, 0, 0, 0.25);
border-color: #d9d9d9;
background: #f5f5f5;
text-shadow: none;
box-shadow: none;
.upBtnText {
color: rgba(0, 0, 0, 0.25);
}
}
}
.bottoms {
width: 100%;
min-height: 20px;
.b_items {
width: 100%;
height: 30px;
margin: 5 0 5px 0;
display: flex;
align-items: center;
.b_i_item {
width: 240px;
height: 22px;
margin-left: 130px;
display: flex;
align-items: center;
transition: background-color 0.3s;
position: relative;
.b_i_i_a {
width: 144px;
height: 100%;
margin: 0 8px;
white-space: nowrap; /* 防止文本换行 */
overflow: hidden; /* 隐藏超出div的内容 */
text-overflow: ellipsis; /* 超出部分显示为省略号 */
color: #1890ff;
}
.downs {
width: 22px;
height: 22px;
position: absolute;
right: 4px;
display: flex;
align-items: center;
justify-content: center;
}
.deletes {
width: 22px;
height: 22px;
position: absolute;
right: 26px;
display: flex;
align-items: center;
justify-content: center;
}
}
.b_i_item:hover {
background-color: #f5f5f5;
}
}
}
}
</style>
wjUp.ts:
import { defHttp } from '/@/utils/http/axios';
enum Api {
setUpload = '/bcCommon/upload',
getDownFile = '/bcCommon/getFileStream',
}
// 文件上传
export const setUploads = (params) => defHttp.uploadFile({ url: Api.setUpload }, params, { isReturnResponse: true });
// 文件下载
export const getDownFile = (params?) => defHttp.get({ url: Api.getDownFile, params, responseType: 'blob' });
标签：const,color,ts,fileList,height,width,vue3,console,上传 From： https://www.cnblogs.com/a973692898/p/18076801