El-upload de Element implementa la carga y descarga de archivos, la vista previa de archivos y la transmisión de archivos.
<*
*url 要上传到的地址
*fileChange添加文件的时候触发的回调
*fileRemove移除文件的时候触发的回调
*handleAvatarSuccess上传成功后触发的回调
**>
<el-form-item label="上传附件:">
<el-upload
:action="url"
:on-change="fileChange"
:on-remove="fileRemove"
:on-success="handleAvatarSuccess"
:on-upload="false"
class="upload-demo"
drag
multiple
>
<i class="el-icon-upload" />
<div class="el-upload__text">
将文件拖到此处,或<em>点击上传</em>
</div>
</el-upload>
</el-form-item>
Efecto:
codigo js:
attachmentsPreview(value) {
if (value.fileOriginName.substring((value.fileOriginName.length - 3)) == 'pdf' || value.fileOriginName.substring((value.fileOriginName.length - 3)) == 'png') { // 判断格式,目前只支持pdf和png格式预览,其他格式为下载
const url = process.env.VUE_APP_BASE_API + '/sysFileInfo/private/preview?fileId=' + value.fileId + '&token=' + store.getters.token; // 生成预览地址
window.open(url); // 打开新页面进行预览
URL.revokeObjectURL(url);// 释放URL对象
} else {
axios
.get(process.env.VUE_APP_BASE_API + '/sysFileInfo/publicDownload?fileId=' + value.fileId, {
headers: { // 下载请求需要携带token,不用带token的可以注释掉 headers
Authorization: store.getters.token
},
responseType: 'blob'
})
.then((res) => {
const blob = new Blob([res.data], {
type: 'application/vnd.ms-excel'
});
const objectUrl = URL.createObjectURL(blob); // 生成下载链接
const a = document.createElement('a'); // 生成a标签
a.style.display = 'none';
a.href = objectUrl;
a.download = value.fileOriginName; // 指定下载文件名
a.click();
URL.revokeObjectURL(a.href); // 释放URL对象
this.downloadLoading = false;
});
}
},
Carga exitosa:
Este método puede cargar varios archivos.
Bienvenido a dejar un mensaje si no lo entiende