elment文件上传展示点击下载

文件上传

<el-col :span="6" class="btn">

<el-form-item label="合同附件" class="item">

<el-upload ref="upload" class="upload-demo" :headers="upload.headers"

accept=".pdf, .doc, .docx, .xls, .xlsx" :action="upload.url" :on- success="handleFileSuccess"

:on-error="upError" :before-upload="beforeUpload" :file-list="fileList" multiple>

<el-button size="small" style="margin-left:10px">点击上传</el-button>

</el-upload>

</el-form-item>

</el-col>

//data 里面定义上传头部

data(){

return{

fileList: [],

// 合同文件列表

cceedcAppendixInfoList: [],

upload: {

// 设置上传的请求头部

headers: { Authorization: "Bearer " + getToken() },

// 上传的地址

url: process.env.VUE_APP_BASE_API + "/appendix/fileUpload",

goodsUrl: process.env.VUE_APP_BASE_API + "/contract/goods/read",

isUploading: false,

}

methods(){

//on-success

handleFileSuccess(response, file, fileList) {

// console.log('response ',response )

if (this.info.form == 'edit') {

bindContract(this.form.id, response.data[0].id).then((response) => { });

} else {

var fileInfo = { "id": response.data[0].id };

this.cceedcAppendixInfoList.push(fileInfo);

}

// 文件上传失败

upError(e) {

this.$msg("上传失败", "error");

// 文件上传类型上传大小

beforeUpload(file) {

const fileSuffix = file.name.substring(file.name.lastIndexOf(".") + 1);

const whiteList = ["pdf", "doc", "docx", "xls", "xlsx"];

if (whiteList.indexOf(fileSuffix) === -1) {

this.$msg("上传文件只能是 pdf、doc、docx、xls、xlsx格式", "error");

return false;

}

// 上传大小

// const isLt2M = file.size / 1024 / 1024 < 2;

// if (!isLt2M) {

// this.$msg("上传文件大小不能超过 2MB", "error");

// return false;

// }

}

展示并点击下载文件

<el-table-column prop="attachment" label="合同附件" width='350'>

<el-button type="text" size="small" v-for="(val, key, i) in scope.row.cceedcAppendixInfoList" :key="i"

@click.native.prevent="downContractFile(val)">{{ val.appendixOriginalName }}</el-button>

</div>

</div>

</template>

</el-table-column>

downContractFile(val) {

request({

//接口

url: '/appendix/downloadFile',

method: 'get',

params: {

"appendixStorageName": val.appendixStorageName, //展示的名字

"appendixOriginalName": val.appendixOriginalName

responseType: 'blob'

}).then((res) => {

var filename = val.appendixOriginalName;

var downloadElement = document.createElement('a');

var href = window.URL.createObjectURL(new Blob([res])); //创建下载的链接　　

downloadElement.href = href;

downloadElement.setAttribute("download", filename);

document.body.appendChild(downloadElement);

downloadElement.click(); //点击下载　　

document.body.removeChild(downloadElement);//下载完成移除元素　　

window.URL.revokeObjectURL(href); //释放掉blob对象

});

elment文件上传展示点击下载相关推荐

文件上传命令rz和下载命令sz的安装
一.xshell工具简介 Xshell 是一个强大的安全终端模拟软件,它支持SSH1, SSH2, 以及Microsoft Windows 平台的TELNET 协议.其可以在Windows界面下用来访 ...
前端实现文件上传（点击+拖拽）
一.简介之前在Vue项目中使用过element的上传组件,实现了点击上传+拖拽上传的两种上传功能.然后我就在想是否可以通过原生的html+js来实现文件的点击上传和拖拽上传,说干就干. 首先是点击获 ...
rz安装 xshell_文件上传命令rz和下载命令sz的安装
上一节中,我们已经搭建好了linux环境,现在我们开始使用xshell工具,连接虚拟机. 一.xshell工具简介 Xshell 是一个强大的安全终端模拟软件,它支持SSH1, SSH2, 以及Mic ...
SpringMVC(SSM)框架搭建JavaWeb项目时，前端页面文件上传，后台Java下载功能实现及相关问题记录说明
看在前面:前端页面通过input控件实现文件上传,后台Java使用SpringMVC框架的实现网上有较多教程,但是真正配置一遍下来不报错的较少,所以本博客前面先介绍一遍完整的设置步骤,然后介绍遇到的一 ...
文件上传数据库，并下载（包含删除，根据条线查询等功能）
废话不多说,上代码一,项目结构如图二,pom.xml,直接拿去用,有一些依赖是我想添加其他功能用的,反正全都cv没问题 <?xml version="1.0" encod ...
微信头像下载并上传到阿里云OSS，PHP文件上传到阿里云OSS简单代码（OSS文件上传，微信头像下载，CURL下载文件，微信头像链接过期）
(就这么个小事,有多少公司多少项目没做到!!) 微信公众号项目,后端获取到授权用户的微信头像后,要自行下载保存,不下载的话,微信返回的头像链接会在一段时间后过期,无法访问! 下面是我写的两个简单实用方 ...
html点击按钮文件上传,js点击按钮实现文件上传
点击按钮实现文件上传点击按钮实现文件上传 $('#uploadFileButton').click(function () { $('#upload').click(); }); $('#uploa ...
js文件上传不用点击上传按钮自动上传
不需要点击上传按钮,选择文件后直接上传: <script> function submitform(){ document.form01.action="upload.php&q ...
CTFshow 文件上传 web167
目录思路总结思路根据提示上传了包含shell的jpg文件,上传成功,点击下载文件,发现没有存在文件包含点,访问upload检查是否有可执行文件,提示没有权限,但是发现中间件是apache 可以 ...

elment文件上传展示点击下载

elment文件上传展示点击下载相关推荐

最新文章

热门文章

elment文件上传 展示点击下载

elment文件上传 展示点击下载相关推荐

最新文章

热门文章

elment文件上传展示点击下载

elment文件上传展示点击下载相关推荐