vue上传图片一（结合axios）

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)
        })
    }

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

结束语：

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