el-upload手动上传带参数和自动上传带参数
el-upload手动上传带参数和自动上传带参数
手动上传带参数的:
这里点击上传按钮不会进行上传,只有点击手动上传按钮的时候才会带参数进行上传,看一下实现代码:
<template>
<div class="upload">
<!-- 手动上传带参数 -->
<el-upload
ref="upload"
class="upload-demo"
action="javascript:void(0);"
:limit="1"
:show-file-list="false"
:auto-upload="false"
:on-change="onChange"
:disabled="fileList.length > 0 ? true : false"
accept=".xlsx,.xls"
>
<el-button
size="small"
type="primary"
:disabled="fileList.length > 0 ? true : false"
>
点击上传
</el-button>
</el-upload>
<div class="lists">
<div class="list" v-for="item in fileList" :key="item.uid">
<i class="el-icon-document"></i>
<span>{{ item.name }}</span>
<i class="el-icon-close close-i" @click="onRemove"></i>
</div>
</div>
<!-- 点击按钮手动上传文件 -->
<el-button @click="onSure" class="handle-btn">点击手动上传文件</el-button>
</div>
</template>
<script>
export default {
data() {
return {
fileList: [], // 文件列表
id: '11',
}
},
methods: {
// 选中文件
onChange(file) {
this.fileList.push(file)
},
// 移除文件
onRemove() {
this.fileList = []
this.$refs.upload.clearFiles()
},
// 确定
async onSure() {
const formData = new FormData()
//把接口需要的参数带进去
formData.append('id', this.id)
formData.append('file', this.fileList[0].raw)
//点击确定按钮调接口
const res = await inter(formData)
console.log(res)
},
},
}
</script>
<style lang="scss" scoped>
.upload {
margin: 200px;
}
.lists {
margin-top: 20px;
.list {
width: 200px;
display: flex;
align-items: center;
&:hover {
background-color: #f5f7fa;
}
span {
width: 0;
flex-grow: 1;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.close-i {
cursor: pointer;
}
}
}
.handle-btn{
margin-top: 30px;
}
</style>
这里的action="javascript:void(0);"就是告诉浏览器不自动提交,当点击按钮需要提交的时候才会执行上传.
自动上传需要携带参数的:
<template>
<div class="upload-content">
<el-form ref="form" class="el-form mb30" :model="form">
<el-form-item>
<el-radio-group v-model="form.methods">
<el-radio label="21">增值税发票</el-radio>
<el-radio label="85">通用机打发票</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
<el-upload
ref="uploadFile"
:action="`${baseUrl}/invoice/uploadZip`"
:before-upload="handleBeforeUpload"
class="upload-demo"
:data="{
pid: form.methods,
}"
drag
:headers="uploadHeader"
:on-error="handleError"
:on-success="handleUploadSuccess"
:show-file-list="false"
>
<div class="upload-tips">点击上传或者将图片拖放此区域任意位置</div>
<i class="el-icon-upload"></i>
<div class="upload-img">上传文件</div>
<div class="upload-desc">文件必须为 .zip 类型</div>
</el-upload></div>
</template>
<script>
import { baseURL } from '@/config'//需要看你当前项目的地址是写在哪里的,引入即可
import { getToken } from '@/utils/token'//封装的获取token的方法,可以自己定义
export default {
data() {
return {
baseUrl: baseURL, //上传的公共地址
uploadHeader: {
token: getToken(), //上传接口需要携带的token,也可以让后端帮你把接口过滤,就可以不用携带token
},
form: {
methods: '21', //上传接口需要携带的其他参数
},
}
},
methods: {
// 上传之前
handleBeforeUpload(file) {
//图片上传之前的操作,规定图片类型
let fileName = file.name
let pos = fileName.lastIndexOf('.')
let lastName = fileName.substring(pos, fileName.length)
if (lastName.toLowerCase() !== '.zip') {
this.$message.error('文件必须为 .zip 类型')
this.$refs.uploadFile.clearFiles()
return false
}
},
//上传失败
handleError() {
this.$message.error('上传失败,请重试')
},
//图片上传成功
handleUploadSuccess(res) {
console.log(res, '图片上传成功的操作')
},
},}
</script>
自动上传action就需要写上上传的地址,data里面就是除上传的文件外其他的参数。