导入功能,使用element upload组件,官方文档如下
<el-upload
class="upload-demo"
action="https://jsonplaceholder.typicode.com/posts/"
:on-preview="handlePreview"
:on-remove="handleRemove"
:before-remove="beforeRemove"
multiple
:limit="3"
:on-exceed="handleExceed"
:file-list="fileList">
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>
<script>
export default {
data() {
return {
fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]
};
},
methods: {
handleRemove(file, fileList) {
console.log(file, fileList);
},
handlePreview(file) {
console.log(file);
},
handleExceed(files, fileList) {
this.$message.warning(`当前限制选择 3 个文件,本次选择了 ${files.length} 个文件,共选择了 ${files.length + fileList.length} 个文件`);
},
beforeRemove(file, fileList) {
return this.$confirm(`确定移除 ${ file.name }?`);
}
}
}
</script>
需要注意的地方:
action为必选参数,上传的地址
headers为设置上传的请求头部
导出功能,通过按钮触发
<el-button
type="primary"
class="addBtn"
plain
icon="el-icon-download"
@click="handleDownload"
>导出</el-button
>
<script>
import {
downloadData
} from '@/api/rfidManage/rfid'
// 导出
handleDownload() {
console.log('导出')
const pagination = { pageNum: this.pagination.pageNum, pageSize: this.pagination.pageSize }
const requestParams = Object.assign({}, pagination, this.queryParam)
downloadData(requestParams).then(res => {
console.log(res)
if (!res) {
return
}
// 这里的blob处理可做可不做,我试了下,不做blob也可以下载且不乱码
// 这里new Blob第一个参数要传需要在表格里展示的内容,因为没有做过,直接看了别人的代码,所以在这里踩坑踩了好久,到后来才发现是传值的问题
let blob = new Blob([res.data], { type: 'application/vnd.ms-excel' })
const url = window.URL.createObjectURL(blob)
const link = document.createElement('a')
link.style.display = 'none'
link.href = url
// download 属性定义了下载链接的地址而不是跳转路径
link.setAttribute('download', 'RFID导出数据.xls')
document.body.appendChild(link)
link.click()
window.URL.revokeObjectURL(link.href) //释放url
document.body.removeChild(link) //释放标签
})
},
</script>
downloadData
// 导出
export function downloadData(data) {
return selt.request({
url: 'device/rfidManage/export',
method: 'get',
headers: { Authorization: getToken() },
responseType: 'blob',
params: data
})
}
最后感谢 掘金社区的@Shang