vue图片上传

今天来跟大家分享一下vue图片上传，以及一些样式的设计

如图是一个上传按钮，当上传成功后按钮被上传的图片缩略图替代

效果

=》

 

代码

 

　　　　　//elementui按钮

　　　　　　　　　<el-button
 2               class="fileParent"
 3               type="success"
 4               icon="el-icon-plus"
 5               style="background:#273C48"
 6               @change="uploadFile"
 7             >
 8               <input class="file" type="file" @change="uploadFile" multiple="multiple" />//上传框
 9               <img :src="tempImg" v-if="tempImg" alt />//缩略图
10             </el-button>

 

 

 async uploadFile(event) {
      let file = event.target.files[0]; //获取input的图片file值
      let param = new FormData(); // 创建form对象
      param.append("imgFile", file); //对应后台接收图片名
      await uploadPicture(param).then(res => {//uploadPicture为我的api接口
        if (res.code == 1) {
          let url = res.url[0].url;
          this.tempImg = "online" + url;
        }
      });
      this.$notify({
        duration: 3000,
        title: "成功",
        message: "上传成功！",
        type: "success"
      });
    }

 

 //css样式在这里

.fileParent {
  position: relative;
  img {
    position: absolute;
    width: 60px;
    height: 39px;
    left: 0;
    top: 0;
  }
}
.file {
  position: absolute;
  left: 0;
  opacity: 0;
}

 

实际的框框是这样的