文件上传的接口请求头
headers: { "Content-Type": "multipart/form-data" },
自动上传
el-upload上传文件调接口的时候默认会带有一个入参file: 原生的file对象
无额外入参
action属性指定了文件上传的接口地址
auto-upload属性:是否在选取文件后立即上传,默认值true
所以只要设置了这两属性,文件在选择后(或拖拽到上传区域后)会自动上传到 action 属性指定的地址,默认入参是file。
<div class="batch-import-contain">
<el-button type="primary" size="mini">下载模板</el-button>
<el-upload
class="upload-demo"
drag
action="https://jsonplaceholder.typicode.com/posts/"
:auto-upload="true"
:accept="accept"
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">
<p>点击或将文件拖拽到这里上传</p>
<p>支持扩展名:.xls .xlsx .csv .et .ett .xlt...</p>
</div>
</el-upload>
</div>
export default {
name: 'batchImport',
data() {
return {
accept: '.xls,.xlsx,.csv,.et,.ett,.xlt,.png',
}
},
}
有额外入参
但如果还有额外的入参,就要用到http-request属性:覆盖默认的上传行为,可以自定义上传的实现
action的值可以设置为#或其他占位符,因为实际请求会在http-request中处理
<div class="batch-import-contain">
<el-button type="primary" size="mini">下载模板</el-button>
<el-upload
class="upload-demo"
drag
action="#"
:accept="accept"
:auto-upload="true"
:http-request="customUpload"
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">
<p>点击或将文件拖拽到这里上传</p>
<p>支持扩展名:.xls .xlsx .csv .et .ett .xlt...</p>
</div>
</el-upload>
</div>
export default {
name: 'batchImport',
data() {
return {
accept: '.xls,.xlsx,.csv,.et,.ett,.xlt,.png',
extraParams: {
userId: 123,
token: 'your_token_here'
},
}
},
methods: {
customUpload(params) {
// params是一个对象,包含了file和fileList,
// 但是这个params参数可能每个版本不一样值就不一样,到时候自己打印看看,
// 反正file的值就是原始的File对象
const formData = new FormData()
// 如果是单个文件:'file',多个文件'file[]'
formData.append('file', params.file) // 这是file入参,文件信息
this.fileList.forEach(item => {
formData.append("file[]", file.raw)
// 注意:某些版本的 Element UI 可能不直接提供 file.raw,可能需要调整
// 如果不是 file.raw,则可能需要通过其他方式获取到原始的 File 对象
})
// 如果extraParams是个对象,循环加入formData
for (const key in this.extraParams) {
formData.append(key, this.extraParams[key])
}
// 如果extraParams是个单独的值,直接加入
formData.append('extraParams', 'someValue') // 这是额外的入参,假设叫extraParams
// 调接口
接口地址(入参:formData).then(res => {
// 上传成功
}).catch(() => {
// 上传失败
})
},
},
}
手动上传
上面是选择文件后就自动调接口上传到服务器了,还有一种情况是:选择文件后,点击确定按钮或者其他什么操作才触发文件上传至服务器
无额外入参
auto-upload属性设置为false
action属性写明接口地址
在按钮点击事件中调用upload组件的submit方法手动触发上传
<div class="batch-import-contain">
<el-button type="primary" size="mini">下载模板</el-button>
<el-upload
class="upload-demo"
ref="upload"
drag
action="https://jsonplaceholder.typicode.com/posts/"
:auto-upload="false"
:accept="accept"
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">
<p>点击或将文件拖拽到这里上传</p>
<p>支持扩展名:.xls .xlsx .csv .et .ett .xlt...</p>
</div>
</el-upload>
</div>
<span class="footer">
<el-button type="primary" @click="handleSure" size="mini">确定</el-button>
</span>
export default {
name: 'batchImport',
data() {
return {
accept: '.xls,.xlsx,.csv,.et,.ett,.xlt,.png',
}
},
methods: {
handleSure() {
this.$ref.upload.submit() // 写完这个就会触发上传调接口了
}
}
}
有额外入参
<div class="batch-import-contain">
<el-button type="primary" size="mini">下载模板</el-button>
<el-upload
class="upload-demo"
ref="upload"
drag
action="https://jsonplaceholder.typicode.com/posts/"
:auto-upload="false"
:accept="accept"
:file-list="fileList"
:on-change="onchange"
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">
<p>点击或将文件拖拽到这里上传</p>
<p>支持扩展名:.xls .xlsx .csv .et .ett .xlt...</p>
</div>
</el-upload>
</div>
<span class="footer">
<el-button type="primary" @click="handleSure" size="mini">确定</el-button>
</span>
export default {
name: 'batchImport',
data() {
return {
accept: '.xls,.xlsx,.csv,.et,.ett,.xlt,.png',
fileList: [],
extraParams: {
userId: 123,
token: 'your_token_here'
},
}
},
methods: {
onchange(file, fileList) {
this.fileList = fileList
},
handleSure() {
if(!this.fileList.length) {
// 没有文件的时候要提示下"请先上传文件"
return
}
const formData = new FormData()
// 因为按钮点击事件的参数没有file信息,所以入参file要从on-change事件得到的fileList里面取
// 又因为要考虑有几个文件,万一是多选就有多个,入参写法就不一样
this.fileList.forEach(item => {
formData.append("file[]", file.raw)
// 注意:某些版本的 Element UI 可能不直接提供 file.raw,可能需要调整
// 如果不是 file.raw,则可能需要通过其他方式获取到原始的 File 对象
})
// 如果单个文件,就直接formData.append("file", this.fileList.raw)
// 额外入参
for (const key in this.extraParams) {
formData.append(key, this.extraParams[key])
}
// 或者单个入参 formData.append("入参名", "入参值")
// 调接口开始上传
接口地址(入参: formData).then(res => {
// 上传成功
}).catch(() => {
// 上传失败
})
},
}
}