vue.js 点击按钮上传图片和预览(参考)

  //先介绍一下背景
  //首先头顶上有一个保存按钮,用来上传图片的
  //下面是内容 , 有一个input框,type=file.. 有一个button, 用来代替input去选择文件
  //我的后台是要从请求的api里拿到上传的url地址,再通过头顶的保存按钮上传,之后返回一个图片的url地址,动态绑定到页面的img标签上显示出来
  //参考了网上一些写法, 我这里只为了实现功能, 不做其它处理

//样式就不写了, 最后贴张图
<template>
  <div @click="onUpload">保存</div>  //顶部上传按钮

  <button @click="onPickFile">选择图片</button>                //把下面input隐藏,代替它选择文件

  <input 
    type="file" 
    ref="fileInput" 
    accept="image/*" 
    @change="getFile"
    style="display: none"
   >            //选择文件
    
  <img :src="imageUrl"/>       //绑定文件地址
</template>

<script>
import axios from 'axios'            //获取上传的链接
export default {
  name: 'whatever',
  data () {
    return {
      imageUrl: "",  //img绑定的src地址
      postUrl: ""       //需要上传到的地址
    }
  },
  mounted () {
    //第一步:先请求一下api,看看需要上传到哪里去,存到postUrl里面 ( 做了跨域配置,所以直接写成了api )
    axios.get('api/getUploadInfo?type=image').then( res => {
      if ( res.status === 200 && res.data){
        let data = res.data.data
        let postUrl = data.url
        console.log( postUrl)             //页面挂载后,先打印一下,拿到了需要上传到的url地址   ( 第一次有效打印 )
        this.postUrl = postUrl            //把地址保存下来
      }    
    })
  },
   methods : {
    //第二步:再来写个方法, button代替input选择图片
    onPickFile () {
      this.$refs.fileInput.click()
    },
    //第三步: 文件选择后, 后在页面上显示出来    转base64位的操作
    getFile (event) {
      const files = event.target.files
      let filename = files[0].name          //只有一个文件
      if ( filename.lastIndexOf('.') <= 0 ) {
        return alert("Please add a valid image!")        //判断图片是否有效
      }
      const fileReader = new FileReader()                //内置方法new FileReader()   读取文件
        fileReader.addEventListener('load',() => {
        this.imageUrl = fileReader.result
       })
        fileReader.readAsDataURL(files[0])
        this.image = files[0]
        //到这里后, 选择图片就可以显示出来了
    } ,
    //第四步: 上传文件了
    onUpload (event) {
      event.preventDefault();
      let fd = new FormData()              //内置方法new FormData()  新建一个表格
      fd.append('file',this.image)          //把image添加进去
      console.log(this.image)                                    //(       第二次有效打印           )
      axios.post(this.postUrl,fd).then( res => {                 //第一个参:this.postUrl就是上面保存好的要上传的地址
      console.log(res)                                               //(      第三次有效打印    )
        if(res.status === 200 && res.data ){
          let data = res.data.data
          let imageUrl = data.url                                        //上传成功 , 后台返回了一个图片地址
          this.imageUrl = imageUrl
        }
       }).catch(error => {
          console.log(error)
      })
    }
  }
}
</script>

第一次打印结果

firstPrint.png

选择图片后

chooseFile.png

第二次和第三次打印结果 ( 选择图片并点击保存上传按钮后)

twicePrint.png