vuejs经验交流之-图片上传

第一步  预览按钮

<Button style="cursor: pointer;position: absolute;#5d5d5d;left:398px;top:2px;border:0px;"  @click="addSysPic" type="text">预览</Button>

 

第二步  触发input的file类型

 <input type="file" @change="onSysFileChange" id="fileSysGrade" style="display: none">

 

第三步  js事件

   

 //预览按钮事件

 addSysPic(e) {

      e.preventDefault()

      //input的file

      $('#fileSysGrade').trigger('click')

      return false

   },

 //input的file事件

   onSysFileChange(e) {

      // 浏览图片

      var files = document.getElementById('fileSysGrade')

      if (files) {

        var file = files.files[0]

          /*global FormData*/

        var formdata = new FormData()

        formdata.append('file', file)

        axios({

          url: '/upload?type=map',

          method: 'post',

          data: formdata,

          headers: {

            'Content-Type': 'application/x-www-form-urlencoded'

          }

        }).then((res) => {

          console.log('上传成功', res.data.id)

          // 上传成功返回地id

          var id  = res.data.id

        }).catch((err) => {

          console.log('上传失败', err)

        })

      }

    },