Element-ui上传文件（删除、添加、预览）
2024-10-12 11:26:09
先看下效果是不是你所需要的。。。。
上传文件进度条后续会加上的。。。。
功能需求：默认为上传状态
1、未上传：点击可上传文件
2、已上传：点击可上传文件
（1）、鼠标移入【删除】
（2）、鼠标点击【预览】
然后废话不多说，直接上代码啦，希望能够帮助到你
<template>
<div class=''>
<ul class="contract_list">
<li v-for="(item,index) in items" :key="item.index">
<div class="add_contract" v-if="item.contractTempletPath==''" title="点击可添加合同">
<el-upload
class="upload-demo"
ref="upload"
:http-request="httpRequest"
:show-file-list="false"
:before-upload="beforeAvatarUpload"
:data="{'id':item.id}"
action="/clapi/materiel/mealContractTempletRela/uploadContractTemplet"
:limit="1"
:auto-upload="true">
<div class="add_contract" slot="trigger">
<div class="contract_box">
<p class="el-icon-plus add_icon"></p>
<p>上传{{item.contractTempletName}}</p>
</div>
</div>
</el-upload>
</div>
<!--上传文件之后可删除-->
<div class="" v-else>
<div class="add_contract">
<span @click="del(item)" title="点击可删除">删除</span>
<div class="adreementImg" @click="preview(item)" v-if="item.contractTempletName=='设计合同模板'">
<img title="点击可预览" src="./../images/1.png">
</div>
<div class="adreementImg" @click="preview(item)" v-if="item.contractTempletName=='意向合同模板'">
<img title="点击可预览" src="./../images/2.png">
</div>
<div class="adreementImg" @click="preview(item)" v-if="item.contractTempletName=='正式合同模板'">
<img title="点击可预览" src="./../images/3.png">
</div>
</div>
</div>
<p class="contract_text">{{item.contractTempletName}}</p>
</li>
<!--上传文件之后可预览-->
<el-dialog width="50%"
:visible.sync="dialogVisible"
:title="previewName">
<iframe :src='previewUrl' width='100%' height='100%' frameborder='1' style="height: 540px;"></iframe>
</el-dialog>
</ul>
</div>
</template> <script>
export default {
props: {
message: Object
},
data() {
return {
mealId:"",
previewUrl:"",
previewName:"",
dialogVisible: false,
videoFlag:false,
items:[],
fileData:"",
fileName:"",
id:""
}
},
methods: {
// 点击预览
preview(val){
this.dialogVisible=true;
this.previewUrl = val.contractTempletPath;
this.previewName = val.contractTempletName;
}, // 判断上传文件大小不能超过50M
beforeAvatarUpload(file){
const isLt2M = file.size / 1024 / 1024 < 50
if(!isLt2M) {
this.$message({
message: '上传文件大小不能超过 50MB!',
type: 'warning'
});
return false;
}
},
// 点击删除
del(val){
this.$confirm("确认要删除"+val.contractTempletName+"吗？", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
})
.then(() => {
this.$axios.post('修改为删除接口地址',{
id:val.id
})
.then((response) => {
this.$message({
type: "success",
message: "删除"+val.contractTempletName+"成功!"
});
this.templetManage();
})
.catch((error) => { });
})
.catch(() => { });
},
// 转换base64格式
getBase64(file) {
return new Promise(function(resolve, reject) {
let reader = new FileReader();
let imgResult = "";
reader.readAsDataURL(file);
reader.onload = function() {
imgResult = reader.result;
};
reader.onerror = function(error) {
reject(error);
};
reader.onloadend = function() {
resolve(imgResult);
};
});
},
httpRequest (options) {
this.fileName = options.file.name;
this.id = options.data.id;
this.getBase64(options.file).then(res => {
this.fileData = res.split(',')[1];
this.$axios.post('修改为你的上传接口地址',{
fileData:this.fileData,
fileName:this.fileName,
id:this.id
})
.then((response) => {
this.$message({
type: "success",
message: "上传成功!"
});
this.templetManage();
})
.catch((error) => {
console.log(error);
}); });
},
templetManage(){
this.$axios.get('查询接口数据地址?mealId='+this.mealId)
.then((response) => {
var data = response.data.result
this.items = data;
for(var i=0;i<data.length;i++){
if(data[i].contractTempletPath){
this.items[i].contractTempletPath="http://crm.bc100.com:8012/onlinePreview?url=" + encodeURI(data[i].contractTempletPath);
}
}
})
.catch((error) => {
this.$message({
type: "warning",
message: error.response.data.result
});
});
}
},
created() {
this.mealId = this.message.id;
this.templetManage();
},
}
</script> <style scoped>
.adreementImg,.adreementImg img{
height: 300px;
width: 220px;
} .contract_box {
color: #0099ff;
font-size: 14px;
}
.contract_list {
text-align: center;
display: flex;
margin: 50px auto;
width: 100%;
}
.contract_list li {
margin-left: 80px;
}
.contract_text {
font-size: 14px;
margin-top: 10px;
}
.add_contract {
height: 300px;
cursor: pointer;
width: 220px;
display: flex;
background: #f7f7f7;
border: 1px solid #c4c4c4;
justify-content: center;
align-items: center;
text-align: center;
position: relative;
}
.add_contract span {
width: 100%;
z-index: 1111;
position: absolute;
bottom: 0;
padding: 6px;
background: #000;
opacity: 0.7;
color: #fff;
display: none;
}
.contract_list li .add_contract:hover span {
display: block;
}
.add_icon {
font-size: 40px;
margin-bottom: 20px;
}
</style>
若有不明白请加群号：复制 695182980 ，也可扫码，希望能帮助到大家。
最新文章
- Promise 异步(asynchronous )编程
- php 碎片笔记
- selenium+python笔记5
- dom 绘制正方形
- pcduino+opencv实现人脸追踪摄像头
- MYSQL router 自动均衡负载
- AngularJS学习-初识
- Apache HTTP Server mod_dav.c 拒绝服务漏洞(CVE-2013-1896)
- Python笔记：使用pywin32处理excel文件
- JS获取整个HTML网页代码 - Android 集美软件园 - 博客频道 - CSDN.NET
- HSV 量化
- 【poj解题】1028
- 关于layer的坑
- mysql锁机制详解
- k8s--如何使用Namespaces
- Java 中的字符串与 []byte 字节数组
- Sping Cloud项目启动报A component required a bean of type 'com.tianyan.bbc.dao.SecurityUserBaseMapper' that could not be found.
- 最长公共前缀(java实现)
- Linux 关机、重启 命令
- %08lx