- 上传
- 在线预览（iframe）：
-
payload：
- response：
文章来源：https://www.toymoban.com/news/detail-628120.html
- 全部代码：
<template>
<div>
<el-table :data="tableData" border style="width: 100%">
<el-table-column prop="date" label="日期"></el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="province" label="省份"></el-table-column>
<el-table-column prop="city" label="市区"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
<el-table-column prop="zip" label="邮编"></el-table-column>
<el-table-column fixed="right" label="操作">
<template slot-scope="scope">
<el-button type="text" size="small">编辑</el-button>
<el-button @click="handleClick(scope.row)" type="text" size="small">上传文件</el-button>
</template>
</el-table-column>
</el-table>
<el-upload
class="upload-demo"
action="default"
ref="uploadFile"
style="display: none"
:http-request="uploadFilePdf"
:on-success="handleSuccess"
:limit="1"
:show-file-list="false"
>
<el-button type="default" ref="upload">上传文件</el-button>
</el-upload>
<el-dialog
v-if="viewDlg"
:title="viewDlgTitle"
class="prj-view-dlg"
:visible.sync="viewDlg"
:fullscreen="true"
append-to-body
v-loading="diaLoading"
>
<div class="iframe" style="height: 100%">
<iframe
:src="pageUrl"
frameborder="0"
height="100%"
width="100%"
scrolling="no"
name="demo"
></iframe>
</div>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="downloadFile">下 载</el-button>
<el-button @click="viewDlg = false">关 闭</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import axios from 'axios'
export default {
name: "test",
methods: {
// 上传
uploadFilePdf(params) {
// this.tableLoading = true;
const file = params.file;
let lastName = file.name
.substring(file.name.lastIndexOf("."), file.name.length)
.toLowerCase();
if (lastName == ".pdf") {
var formData = new FormData();
formData.append("file", file); // 'file'名称要与后台约定好 一致
axios.post(`/xxxxxx/${this.currentRowData.id}`, formData, {
responseType: "blob", //这里是声明期望返回的数据类型，为blob
}).then(result => {
console.log(result);
// this.tableLoading = false;
if (result) {
// 创建一个包含结果数据的URL，并在URL末尾添加"#toolbar=0"来隐藏工具栏
this.pageUrl = window.URL.createObjectURL(result.data) + "#toolbar=0";
this.viewDlgTitle = '文件预览';
this.viewDlg = true;
}
})
this.$refs.uploadFile.clearFiles();
} else {
this.$message({
message: "请上传格式为.pdf类型的文件",
type: "warning",
});
this.tableLoading = false;
this.$refs.uploadFile.clearFiles();
}
},
// 下载
downloadFile() {
let fileName = this.currentRowData.name + ".pdf";
if ("download" in document.createElement("a")) {
let a = document.createElement("a");
a.href = this.pageUrl;
a.download = fileName;
a.style.display = "none";
document.body.appendChild(a);
a.click();
URL.revokeObjectURL(a.href);
document.body.removeChild(a);
} else {
navigator.msSaveBlob(blob, fileName);
}
},
// 上传成功
handleSuccess() {
// this.tableLoading = false;
},
handleClick(row) {
console.log(row);
this.currentRowData = row;
this.$refs.uploadFile.$children[0].$refs.input.click();
}
},
data() {
return {
viewDlg: false,
viewDlgTitle: '',
pageUrl: '',
currentRowData: {},
diaLoading: false,
tableData: [{
date: '2016-05-02',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333,
id: '534a9b92-21fc-446f-9c99-2d123f927ed5'
}, {
date: '2016-05-04',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1517 弄',
zip: 200333,
id: '111'
}, {
date: '2016-05-01',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1519 弄',
zip: 200333,
id: '222'
}, {
date: '2016-05-03',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1516 弄',
zip: 200333,
id: '333'
}]
}
}
}
</script>
初版–01文章来源地址https://www.toymoban.com/news/detail-628120.html
到了这里，关于vue element el-upload附件上传、在线预览、下载当前预览文件的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
