基于vue（2.X）写一个简单的图片上传预览的功能

这里我没有用vue的组件库，是单纯靠input来写出一个图片上传的功能。
思路是：
先用input[type=file]来获取本地的图片，然后用HTML5的 File API 的 FileReader 图片本地转成base64格式的url，把这个url赋值到用于预览的src就好了。
html代码

  <div class="upload">
    <div class="img-container">
    <img :src="src" alt="user image"> //接受预览的img container
    </div>
    <input type="file" @change="getFile" ref="file" id="file"> //文件上传的input
    <label for="file">画像変更</label>
  </div>

script

name: 'upload',// 这里是我的component的name
    data () {
      return {
        // 转base64码后的data字段
        src: '/static/image/avatar.png' //先设置一个默认图片
      }
    },

我们需要做的就是把input取出来的数据转base64码就好了。直接上代码：

methods: {
      getFile (e) {
        let _this = this
        var files = e.target.files[0]
        if (!e || !window.FileReader) return  // 看支持不支持FileReader
        let reader = new FileReader()
        reader.readAsDataURL(files) // 这里是最关键的一步，转换就在这里
        reader.onloadend = function () {
          _this.src = this.result
        }
      }
    }

以上内容只是实现了文件上传和预览，不包括传到服务器。如果需要提交到服务器的话，直接把data里面的src传过去就好了。
css部分
最开始我的想法是：让input 的opacity: 0;用一个button来伪装他，z-index覆盖到上面。
但是我后面发现我忽略了一个html很重要的一个知识点，就是input和lable的结合。
给label一个 for 属性指向input的唯一 id ，这样点击label就相当于点击input。
很棒！
所以html就变成了这样：

 <input type="file" @change="getFile" ref="file" id="file"> //文件上传的input
    <label for="file">画像変更</label>

css就是这样：

.upload {
    label {
      width: 120px;
      display: block;
      border-radius: 2px;
      color: #fff;
      text-align: center;
      margin-top: 10px;
      font-size: 12px;
      background-color: map-get($global-color-base, primary);
    }
  }
  input[type='file'] {
    display: none;
    z-index: 10;
    width: 120px;
    font-size: 0;
    height: 30px;
  }

效果图.png

最终实现了一个简单的上传预览的功能。很简单吧！嘿嘿😝
记录一下，以便以后查阅！
参考：https://www.cnblogs.com/zzcit/p/7743841.html

最后编辑于：2018.02.09 14:46:06