vue如何优雅的上传文件
- 上传文件的方式
- 1.表单提交文件
- 2.Elementui封装的组件提交文件
上传文件的方式
下面是我使用过得两种提交方式，就详细说一下哈
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.urithis.$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-uploadaction="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'}})
}
如有问题，还请多多指教
