vue上传图片并预览

　　1.首先,<input type="file" />的上传附件比较丑,所以我先将附件的样式做了调整,如下:

这是HTML的代码:

<div class="fileBox">
            <span class="fileinput-button"> 
            <img :src="srcOthers" alt="" width="100px" height="100px">
            <span>点击上传</span> 
            <input type="file" style=" 100px;height: 100px;" @change="getFileOthers"> 
            </span>
        </div>
        <div class="fileBox-word">
            <span class="fileinput-word">合同及其他扫描件上传</span>
        </div>

CSS样式代码:

<style scoped>
.fileBox{
   100%;
  height: 112px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  flex-wrap: wrap;
}
.fileBox-word{
     100%;
    height: 30px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    flex-wrap: wrap;
}
.fileinput-button { 
   100px;
  height: 100px;
  float: left;
  display: flex;
  margin-top: 10px;
  line-height: 150px;
  position: relative; 
  display: inline-block; 
  overflow: hidden; 
  color: #ccc;
  border: 1px solid #ccc;
  background: url(../../assets/img/addUpload.png) no-repeat;
  background-position: center 20px;
} 
.fileinput-button input{ 
  position: absolute; 
  left: 0px; 
  top: 0px; 
  opacity: 0; 
  -ms-filter: 'alpha(opacity=0)'; 
}
.fileinput-word{
  display: flex;
   100px;
  text-align: center;
  float: left;
  margin-top: 10px;
  position: relative; 
  display: inline-block; 
  overflow: hidden; 
  color: #666;
  font-size: 14px;
}
</style>

最后就是JS代码:

methods: {
    getFileOthers (e) {//附件预览----合同及其他扫描件
       let _this = this
       var files = e.target.files[0];
       console.log(e.target.files[0]);
       if (!e || !window.FileReader) return  // 看支持不支持FileReader
       let reader = new FileReader()
       reader.readAsDataURL(files) // 这里是最关键的一步，转换就在这里
       reader.onloadend = function () {
         _this.srcOthers = this.result
      }
    },
  },

这样上传附件并且可以预览就实现了