Vue element-ui 上传 和 下载
2021-07-18 本文已影响0人
顺其自然AAAAA
记录一下自己使用element-ui 的 上传组件 的使用，方便以后查阅
1.在html 使用 el-upload
<template>
<div>
<el-upload
class="upload-demo"
:action="uploadImgUrl"
:headers="headers"
:on-success="handleOnSuccess"
:on-remove="handleRemoveFile"
accept=".doc, .docx, .xls, .xlsx, .pdf, .jpg, .jpeg, .png"
multiple
:limit="9"
:file-list="addPriceForm.fileList"
>
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
</div>
</template>
参数配置：
action 必选参数，上传的地址
headers 设置上传的请求头部 要求是Object
accept 接受上传的文件类型（thumbnail-mode 模式下此参数无效）
multiple 是否支持多选文件
on-success 文件上传成功时的钩子
on-remove 文件列表移除文件时的钩子
limit 最大允许上传个数
file-list 上传的文件列表, 例如: [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}]
2.在data() 中的配置
<script>
import { getToken, getSid } from "@/utils/auth";
data () {
return {
uploadImgUrl: process.env.NODE_ENV === "production" ? process.env.VUE_APP_BASE_API + `fileapi/upload/uploadDjFileList.do`
: "http://localhost:8088/upload/uploadDjFileList.do",
removeImgUrl: process.env.NODE_ENV === "production" ? "fileapi/upload/deleteFile.do"
: "http://localhost:8088/upload/deleteFile.do",
headers: {
uiticket: getToken(),
sid: getSid() || "",
},
}
}
</script>
3.在methods 中使用
<script>
methods: {
// 上传文件的回调
handleOnSuccess(response, file, fileList) {
for (let i in fileList) {
if (file.uid === fileList[i].uid) {
fileList[i].path = response.data.newFilePath;
fileList[i].wjlj = this.uploadImgUrl + response.data.newFilePath;
fileList[i].zlmc = fileList[i].name;
break;
}
}
this.addPriceForm.fileList = fileList;
},
// 封装文件删除接口
removeFile(path, index, fn) {
console.log(path, "删除文件path路径");
request({
url: this.removeImgUrl,
method: "get",
params: {
path: "D:\\file\\gcf\\dj" + path,
},
})
.then(() => {
console.log(index, "index");
if (typeof fn === "function") {
fn(index);
}
})
.catch((e) => {
console.log("错误：" + e);
})
.finally();
},
// 删除文件
handleRemoveFile(file) {
let path = "";
let index = -1;
for (let i in this.addPriceForm.fileList) {
if (file.uid === this.addPriceForm.fileList[i].uid) {
path = this.addPriceForm.fileList[i].path;
index = parseInt(i);
}
}
this.removeFile(path, index, this.resetzrSjzlWwDtos);
},
// 封装删除本地显示文件
resetzrSjzlWwDtos(index) {
const arr = this.addPriceForm.fileList;
arr.splice(index, 1);
this.$set(this.addPriceForm, "fileList", arr);
},
}
</script>
上传操作大概就是这些吧
下面写一下自己项目的下载，可能每个人使用的不一样吧
如果没什么其他要求，其实可以使用：window.open(url)
window.open('http://localhost:8002/xxxxxxxxxxx')
// 反正给一个Url的http路径就行了
// 父组件
<el-table-column
property="filepath"
label="查看文件"
tag="查看文件"
align="center"
width="150"
>
<template slot-scope="scope">
<el-button type="text" @click="handlePicture(scope.row)"
>查看</el-button
>
</template>
</el-table-column>
<!-- 文件列表显示弹出框开始 -->
<el-dialog title="查看文件" :visible.sync="isShowFile">
// sjzl 就是当前行的数据，传给子组件
<Sjzl-tab :sjzl="sjzl" />
</el-dialog>
<!-- 文件列表显示弹出框结束 -->
handlePicture(row) {
// 拿到当前行的所有数据
this.sjzl = row;
this.isShowFile = true;
},
// 子组件
// 这里是点击下载的时候拿到当前行的数据传过去
<el-button v-if="scope.row.bdlj && !isImage(scope.row.bdlj)" type="text"
@click="showReadFile(scope.row.bdlj, 'file', 1, scope.row)">下载附件</el-button>
子组件拿到数据并且监听，处理数据
watch:{
sjzl: {
handler: function (sjzl) {
if (sjzl) {
this.ywslid = sjzl.id
const filearr2 = []
this.imgList = []
// 判断是否有文件或者图片
if (sjzl.filepathList && sjzl.filepathList instanceof Array) {
for(let i = 0; i < sjzl.filepathList.length; i++) {
const arr = sjzl.filepathList[i].split('\\')
const arr4 = sjzl.fileNameList[i].split('.')
const arr2 = arr[arr.length - 1].split('.')
const name = arr2[0]
const fileName = arr4[0]
const type = getFileType2(arr2[arr2.length - 1])
this.imgList.push({
url: this.actionUrl + sjzl.filepathList[i],
name: name,
type: type,
fileName: fileName
})
filearr2.push({
bdlj: this.actionUrl + sjzl.filepathList[i],
zlmc: name,
type: type,
fileName: fileName
})
}
}
// filesData 是 table 表格的数据
this.filesData = filearr2
this.fileTotalNumber = sjzl.totalCount
}
},
deep: true,
immediate: true
}
},
子组件就是类似这种效果
微信图片_20210721232226.png
// 点击查看附件和下载附件 filetype = 0 是查看， filetype = 1 是下载
showReadFile (url, type, filetype, row) {
// url = url.split('dj')[1]
url = url
let fileName = row.fileName + '.' + row.type
if (filetype === 1) {
// this.loading = true
// window.open(url)
downloadPdf2(url, fileName).catch(e => {
this.$message.error('获取PDF数据失败，请联系管理员')
console.log('获取PDF数据失败：' + e)
}).finally(() => {
this.loading = false
})
} else {
this.fileObj = {
url: url,
type: type,
name: name,
isShowDialog: true,
fileList: this.imgList
}
}
},
/**
* 获取ArrayBuffer格式的二进制数据
* @param {*} url
* @returns
*/
export function getArrayBufferFile2 (url) {
return service({
method: 'get',
// url: window.location.protocol + '//' + window.location.host + url ,
url: url ,
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
'uiticket': uiticket , // 必须添加的请求头
'sid': sid // 必须添加的请求头
},
responseType: 'arraybuffer', // 关键 设置 响应类型为二进制流
})
}
/**
* 获取Blob格式的二进制数据
* @param {*} url
* @returns
*/
export function getBlobFile2 (url) {
return service({
method: 'get',
// url: window.location.protocol + '//' + window.location.host + url ,
url: url ,
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
'uiticket': uiticket , // 必须添加的请求头
'sid': sid // 必须添加的请求头
},
responseType: 'blob', // 关键 设置 响应类型为二进制流
})
}
/**
* 下载
* @param {*} url
* @param {*} name
*/
export function downloadPdf2 (url, name) {
return getBlobFile2(url).then(response => { // 将后台的图片二进制流转化为base64
const blob = new Blob([response.data], { type: 'application/*' })//这里type指定下载文件的类型
if (window.navigator.msSaveOrOpenBlob) {
navigator.msSaveBlob(blob, name)
} else {
pubDownloadFn(blob, name)
}
})
}
function pubDownloadFn (blob, name) {
console.log(name,'999')
let downloadElement = document.createElement('a')//创建<a>标签
let href = window.URL.createObjectURL(blob) // 创建下载的链接
downloadElement.href = href
downloadElement.download = name // 下载后文件名
document.body.appendChild(downloadElement)
downloadElement.click() // 点击下载
document.body.removeChild(downloadElement) // 下载完成移除元素
window.URL.revokeObjectURL(href) // 释放掉blob对象
}
