vue图片上传

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

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

效果

=》

 

代码

 

 1 　　　　　//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>

 

 

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

 

 //css样式在这里

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

 

实际的框框是这样的

 

 

 

前端就是骗过你的眼睛~ 哈哈哈

来源：https://www.cnblogs.com/fairylee/p/11767813.html