vue结合axios
实现图片上传(一)
前言:
-
当展开一个项目的是时候,文件的上传是必不可少的,本次仅拿图片的上传的众多方法中的一种为举例
-
说明:仅展示图片的上传,使用
axios
发送请求
html
部分(即template)
<input type="file" accept="image/*" @change="changeImg()" ref="img">
methods 部分
changeImg () { const file = this.$refs.img.files[0] const formData = new FormData() formData.append('multipartFile ', file) //如果需要传其他字段的仿照上一行个格式 formData.append('对照接口字段', 需要传输的数据) const config = { headers: { 'Content-Type': 'multipart/form-data' } } this.$axios.put('这里填写接口地址', formData, config) .then(response => { console.log(response.data) }) .catch(error => { console.log(error) }) }
-
一个最原始的上传文件的雏形就此出现
结束语:
文件的上传对个人来说一直是日常交互所经常遇到的问题,所以再次先做个简单的记录,亟待日后的补充,完善,单独封装,形成一个完备的、方便使用的、复用性强的一个文件上传组件,包括目前所知道的图片预览、限制图片(大小、类型、数量)、多图上传、支持修改、剪裁等功能。