vue图片上传后显示

最新推荐文章于 2024-06-01 13:30:13 发布

chaosama

最新推荐文章于 2024-06-01 13:30:13 发布

阅读量731

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/chaosama/article/details/104946743

版权

vue 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

直接看样子吧,点那个相机可以上传照片，然后在下面显示，可以根据自己的要求更换图片的位置、删除（当然，没做拖拽）

单纯改变数组位置，界面是不能刷新的，因为js不检测数组变化，但是会检测数组长度变化

html

      <div class="container">
        <div class="c-card-ico">
          <div style="width: 20vw;display: inline-block;text-align: right">商品描述图：</div>
          <div class="fl mlr10">
            <img src="../../assets/image/uploading.jpg" @click="clp1()"/>
            <input type="file" id="photoList" @input="con1" ref="photoList"/>
          </div>
        </div>

        <div class="flfw mt20" style="margin-left: 200px;">
          <div class="m10" v-for="(list,index) in photoList">
            <div style="position: relative" class="main">
              <img style="width: 150px;height: 100px;" :src="list" />
              <div class="flex-around ico" style="position: absolute">
                <img src="../../assets/image/left.png" @click="left(index)" alt="">
                <img src="../../assets/image/del.png" @click="del(index)" alt="">
                <img src="../../assets/image/right.png" @click="right(index)" alt="">
              </div>
            </div>
          </div>
        </div>

      </div>

css(搞个demo而已，样式有点随便，可以自己随便写)

<style lang="less">
.flfw{
  display: flex;
  flex-wrap: wrap;
}
.mt20{
  margin-top: 20px;
}
.m10{
  margin: 10px;
}

  .container{
    width: 100%;
    .c-card-ico{
      display: flex;
      align-items: center;
      width: 100%;
      margin-top: 10px;
      span{
        display: inline-block;
        text-align: right;
      }
      img{
        width: 150px;
        height: 100px;
      }
      /*img:hover .ico{*/
      /*  display: block;*/
      /*}*/
      input{
        /*visibility: hidden;*/
        display: none;
      }
    }

    .ico{
      width: 150px;
      height: 100px;
      margin-top: -100px;
      background-color: rgba(0,0,0,0.7);
      display: none;
      img{
        width: 30px;
      }
    }
    .main:hover .ico{
      display: flex;
    }
</style>

data(){
    return{
        photoList:[]//图片数组
    }
},
methods:{
    uploadFile (img) {
        return new Promise((resolve, reject) => {
          let formData = new FormData()
          formData.append('images', img)
          //this.global.base.uploadFile为我的图片上传地址，而images是后端要求的文件名
          postAjax(this.global.base.uploadFile, formData).then(res => {
            resolve(res.data)
          }).catch(err => {
            reject(err)
          })
        })
      },
      //图片
      clp1(){
        return this.$refs.photoList.click();
      },
      con1(e){
        this.uploadFile(e.target.files[0]).then(res=>{
          this.photoList.push(res.image0)
        })
      },
      left(index){
        if(index === 0){
          return
        }
        let a,photoList = this.photoList
        a = photoList[index]
        photoList[index] = photoList[index-1]
        photoList[index-1] = a
        this.photoList = []
        this.photoList = photoList
      },
      del(index){
        this.photoList.splice(index,1)
      },
      right(index){
        if(index+1 === this.photoList.length){
          return
        }
        let a,photoList = this.photoList
        a = photoList[index]
        photoList[index] = photoList[index+1]
        photoList[index+1] = a
        this.photoList = []
        this.photoList = photoList
      }
}