vue如何优雅的上传文件
上传文件的方式
下面是我使用过得两种提交方式,就详细说一下哈
1.表单提交文件
2.Elementui封装的组件提交文件
1.表单提交文件
html页面:
为了页面美观,就把form表单的隐藏啦,用了elementui的按钮触发事件。
<el-button @click="getFile" style="margin-top: 10px">
<i class="el-icon-upload"></i> {{$i18n.t('CLICK_UPLOAD')}}
</el-button>
<input type="file" ref="file" style="display: none;" v-on:change="handleFileUpload($event)">
提交方法:
重点就是要转成FormData格式啦
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)
})
},
axios请求:
os请求都是封装好的,重点就是需要加请求头: headers:{ ‘Content-Type’: ‘multipart/form-data’ }
// 文件上传
export function postUpload (file) {
return axios({
url: 'upload',
method: 'post',
data: file,
headers: {
'Content-Type': 'multipart/form-data'
}
})
}
处理好FormData和headers,就和普通接口无异啦
2.Elementui封装的组件提交文件
html页面:
<el-upload
action="https://jsonplaceholder.typicode.com/posts/"
:http-request="onUpload"
>
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
格式判断什么的都在后端写了,前端就单纯上传文件,就没有其他花里胡哨的啦。
action是组件自带,是自动上传得,(但是action是必需得,不使用,为空就好)需要手动上传使用http-request,可自定义事件
官方文档的属性解释说明:
提交方法:
// 上传文件
onUpload (file) {
let formData = new FormData()
formData.append('file',file.file)
postUpload(formData).then((res) => {
console.log(res)
this.$message.success(this.$t('UPLOAD_SUCCESS'))
}).catch((e) => {
this.$message.error(e.message)
})
},
axios请求:
// 文件上传
export function postUpload (file) {
return axios({
url: 'upload',
method: 'post',
data: file,
headers: {
'Content-Type': 'multipart/form-data'
}
})
}
如有问题,还请多多指教