[JavaScript知识库]vue结合axiso实现图片上传（一）

vue结合axiso实现图片上传（一）

前言：

• 当展开一个项目的是时候，文件的上传是必不可少的，本次仅拿图片的上传的众多方法中的一种为举例

• 说明：仅展示图片的上传，使用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)
 ? ? ?  })
 ?  }

• 一个最原始的上传文件的雏形就此出现

结束语：

文件的上传对个人来说一直是日常交互所经常遇到的问题，所以再次先做个简单的记录，亟待日后的补充，完善，单独封装，形成一个完备的、方便使用的、复用性强的一个文件上传组件，包括目前所知道的图片预览、限制图片（大小、类型、数量）、多图上传、支持修改、剪裁等功能。