<template>
<div>
<el-button @click="getFile" style="margin-top: 10px">
<i class="el-icon-upload">i> 上传
el-button>
<input type="file" ref="file" style="display: none;" v-on:change="handleFileUpload($event)">
div>
template>
<script>
// import postUpload from '../../api/index.js'
export default {
methods: {
// 打开文件
getFile () {
this.$refs.file.click()
},
// 获取文件
handleFileUpload (event) {
// 阻止发生默认行为
event.preventDefault();
let formData = new FormData()
let file = this.$refs.file.files[0]
formData.append('file', file)
// console.log(formData.get('file'))
this.onUpload(formData)
},
// 上传文件
onUpload (formData) {
postUpload(formData).then((res) => {
this.mdl.pic = res.result.uri
this.$message.success(this.$t('UPLOAD_SUCCESS'))
}).catch((e) => {
this.$message.error(e.message)
})
},
}
}
script>
axios请求:
axios请求都是封装好的,重点就是需要加请求头: headers:{ ‘Content-Type’: ‘multipart/form-data’ }
// 文件上传
export function postUpload (file) {
return axios({
url: 'upload',
method: 'post',
data: file,
headers: {
'Content-Type': 'multipart/form-data'
}
})
}
axios请求:
// 文件上传
export function postUpload (file) {
return axios({
url: 'upload',
method: 'post',
data: file,
headers: {
'Content-Type': 'multipart/form-data'
}
})
}
感觉文章好的话记得点个心心和关注和收藏,有错的地方麻烦指正一下,如果需要转载,请标明出处,多谢!!!