一、导入/上传
1. 导入excel（阻止默认传）部分代码如下
<el-upload class="upload-demo"
ref="excelUpload"
:action="uploadUrl"
:with-credentials="true"
:on-change="handleChange"
:on-success="uploadSuccess"
:on-error="uploadError"
:limit="1"
:on-exceed="handleExceed"
:file-list="fileList"
:auto-upload="false">
<el-button size="small" type="primary">上传Excel</el-button>
</el-upload>
<span slot="footer" class="dialog-footer">
<el-button>取 消</el-button>
<el-button type="primary" @click="importExcelSubmit">确定</el-button>
</span>
handleChange(file){
let isFile = false;
let arr = file.name.split('.')
let suffix = arr[arr.length - 1]
if(file.type == 'application/vnd.ms-excel' || file.type == 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' || suffix == 'xlsx' || suffix == 'xls'){
isFile = true;
}else{
isFile = false;
}
if (!isFile) {
this.$message.error('上传文件只能是xlsx/xls格式!');
this.fileList = []
}
return isFile;
},
uploadSuccess(res,file){
if(res.statusCode === '0') {
this.$message.success(res.message)
} else{
this.$message.error(res.message)
this.fileList = []
}
},
uploadError(res){
this.$message.error(res.message)
},
handleExceed(files, fileList) {
this.$message.error('最多只能上传一个Excel文件!');
},
importExcelSubmit() {
this.$nextTick(() =>{
this.$refs.excelUpload.submit()
})
},
:on-remove="handleRemove"
如果你是要上传多个文件，然后又删除了几个，这个函数也不需要写
上传图片时只会传当前列表上展示的文件
- action后面接的地址是后台给的地址
- :with-credentials="true" 支持发送 cookie 凭证信息
-
limit accept
limit 限制最大上传数
:limit=9
accept允许上传的格式
如果需要提示信息可以在对应的方法里面配置
这儿因为设置了:auto-upload="false"
所以需要在:on-change绑定的函数里面做相对应的操作，
:before-upload 这个并不会执行
// :on-exceed="handleExceed"
handleExceed() {
this.$message.error('最多上传N张!');
},
- 判断当前文件格式
type: ''
遇到上传excel文件 type为空的情况
可以对name进行判断，name可以拿到文件的后缀名 - 上传携带token
:headers="token"
// token: {}
this.token.XXX = sessionStorage.getItem('UserToken')
// token可以在钩子函数mounted里面获取
- 阻止自动上传
:auto-upload="false"
// 最后在提交的时候使用以下方法才是真正提交
this.$nextTick(() =>{
this.$refs.excelUpload.submit()
})
2. 上传图片（表单中上传图片必填）部分代码如下
<el-form-item label="图片：" prop="imageUrl" ref="uploadElement" >
<el-upload class="upload-demo"
:multiple=true
:action="uploadUrl"
:with-credentials="true"
:on-error="handleError"
:on-success="handleMultSuccess"
:before-upload="beforeupload"
:on-remove="handleRemove"
:file-list="data.imageUrl"
list-type="picture">
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
</el-form-item>
handleMultSuccess (file, fileList) {
//这边对接口返回的cdoe验证是否上传成功如果成功做以下操作
this.data.imageUrl.push({
name: fileList.name,
url: fileList.XXX.url + fileList.XXXX.fileName
})
this.fileList.push(fileList.response.data.url + fileList.response.data.fileName)
this.$refs['form'].validateField('imageUrl')
},
beforeupload(file) {//封面图上传
const isImage = /^image\/\w+$/.test(file.type)
if (!isImage) {
this.$message.error('只能上传图片格式!');
}
return isImage
},
handleError() {
this.$message.error('网络有误请稍后再试～');
},
handleRemove(file,fileList) {
let flag = ''
this.data.imageUrl.map((item,index)=>{
item.url == file.url ? flag = index : ''
})
flag !== '' ? this.data.imageUrl.splice(flag,1) : ''
this.fileList.indexOf(file.url) > -1 ? this.fileList.splice(this.fileList.indexOf(file.url),1) : ''
}
- :multiple=true
选择文件的时候是否可以一次性选择多个还是只能一个个点击 - 多张图片的删除，上传
我在这儿设置了两个变量，this.data.imageUrl是为了表单校验它是必填项，
最后传给后台的值是从this.fileList中取的 - 上传图片在表单中需要必传
:on-success函数中写下面这段代码
this.$refs['form'].validateField('imageUrl')
二、导出
1. 后台返回地址
<el-button type="primary" @click="exportData">导出</el-button>
exportData() {
XXXX(this.form).then(data => {
if(data.status == 200){
this.download(data.request.responseURL);
}
});
},
download(url) {
let iframe = document.createElement("iframe")
iframe.style.display = "none";
iframe.src = url;
document.body.appendChild(iframe);
},
2. 后台返回流
- 直接利用表单form submit (抽子组件)
<el-button type="primary" @click="exportUrl">导 出</el-button>
//封装的子组件
<hidden-form :options="options" :url="url" ref="exportForm"></hidden-form>
exportUrl(){
this.options = {columns:"id,code,XXX",...this.condition}
this.$nextTick(_ => {
this.$refs.exportForm.$refs.hiddenForm.submit()
})
},
// 子组件
<template>
<div>
<form :method="method || 'POST'" v-show="false" :action="url" id="hiddenForm" ref="hiddenForm" target="_blank">
<input type="text" v-for="item in params" :key="item.key" :name="item.key" :value="item.val" />
<input type="submit" value="提交">
</form>
</div>
</template>
<script>
export default {
props:['options','url','method'],
computed:{
params(){
if( typeof this.options == "object"){
let params = []
for(let i in this.options){
params.push({
key:i,
val:this.options[i]
})
}
return params
}else{
return []
}
}
}
}
</script>
- 用原生JS创建表单form
exportFile(){
var conf = {method:'get',action:'url',data:{columns:"id,code,XXXXX",...this.condition}}
this.postDownLoadFile(conf);
},
export const postDownLoadFile = function(options) {
let config = { method: 'post', ...options };
let $iframe = document.getElementById('down-file-iframe');
if (!$iframe) {
$iframe = document.createElement('iframe');
}
//$iframe.childNodes.remove();
let $form = document.createElement('form');
$form.setAttribute('target', 'down-file-iframe');
$form.setAttribute('method', config.method);
$form.setAttribute('action', `${config.action}`);
for (var key in config.data) {
let $input = document.createElement('input');
$input.setAttribute('type', 'hidden');
$input.setAttribute('name', key);
$input.setAttribute('value', config.data[key]);
$form.appendChild($input);
}
$iframe.appendChild($form);
document.body.appendChild($iframe);
$iframe.getElementsByTagName('form')[0].submit();
document.body.removeChild($iframe);
}
- new FileReader()
<el-button size="mini" type="primary" class="" icon="el-icon-notebook-2" @click="exportData">导出订单</el-button>
exportData () {
XXXXX(param).then((response) => {
this.$loading().close()
let reader = new FileReader()
reader.readAsText(response.data, 'utf-8')
reader.onload = (e) => {
try {
const response = JSON.parse(reader.result)
this.$message({ showClose: true, message: response.errMsg || '导出失败', type: 'error' })
} catch (e) {
let filename = response.headers['content-disposition'].split('filename=')[1]
filename = decodeURI(decodeURI(filename))
download(response.data, filename, 'text/plain')
}
}
})
}
