文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

vue实现简单图片上传功能

2024-04-02 19:55

关注

本文实例为大家分享了vue实现简单图片上传的具体代码,供大家参考,具体内容如下

就是给自己留个参照,有什么不合理的地方请大家指出来,然后调整

1.效果展示

2.html相关的代码展示

<div class="form-list">
       <label class="label-one">商品图片</label>
       <div class="add-picture">
         <ul>
          <li v-if="img_li1">
              <!-- 展示图片 -->
              <div class="hasPic" v-if="img_1">
                      <img class="seledPic" :src="this.imgdata.seledPic_1" />
                      <img
                        class="closepic"
                        src="../../assets/images/close.png"
                        @click="pichide('seledPic_1')"
                      />
                    </div>
                    <div class="selPic" v-else>
                      <label for="picadd" class="picadd"></label>
                      <input
                        id="picadd"
                        type="file"
                        maxlength
                        class="input-file"
                        multiple="multiple"
                        @change="onUpload($event,'seledPic_1')"
                        accept="image/*"
                      />
                    </div>
                  </li>
                  <li v-if="img_li2">
                    <!-- 展示图片 -->
                    <div class="hasPic" v-if="img_2">
                      <img class="seledPic" :src="this.imgdata.seledPic_2" />
                      <img
                        class="closepic"
                        src="../../assets/images/close.png"
                        @click="pichide('seledPic_2')"
                      />
                    </div>
                    <div class="selPic" v-else>
                      <label for="picadd" class="picadd"></label>
                      <input
                        id="picadd"
                        type="file"
                        maxlength
                        class="input-file"
                        multiple="multiple"
                        @change="onUpload($event,'seledPic_2')"
                        accept="image/*"
                      />
                    </div>
                  </li>
                  <li v-if="img_li3">
                    <!-- 展示图片 -->
                    <div class="hasPic" v-if="img_3">
                      <img class="seledPic" :src="this.imgdata.seledPic_3" />
                      <img
                        class="closepic"
                        src="../../assets/images/close.png"
                        @click="pichide('seledPic_3')"
                      />
                    </div>
                    <div class="selPic" v-else>
                      <label for="picadd" class="picadd"></label>
                      <input
                        id="picadd"
                        type="file"
                        maxlength
                        class="input-file"
                        multiple="multiple"
                        @change="onUpload($event,'seledPic_3')"
                        accept="image/*"
                      />
                    </div>
                  </li>
                </ul>
                <p class="prompt">提示:最多添加3张图片,格式为jpg或png</p>
            <p class="prompt" v-if="tips">店铺照片不能为空</p>
    </div>
</div>

3.css样式代码

.form-list {
    width: 100%;
    color: #666;
    font-size: 16px;
    margin: 0 0 20px 0;
}
.add-picture {
    overflow: hidden;
}
 
.add-picture ul li {
    float: left;
    margin: 0 20px 10px 0;
}
 
.add-picture .hasPic,
.add-picture .selPic {
    overflow: hidden;
    width: 86px;
    height: 86px;
    border-radius: 4px;
}
 
.add-picture .hasPic {
    position: relative;
}
 
.add-picture .hasPic img {
    display: block;
    width: 100%;
    height: 100%;
}
 
.add-picture .hasPic img.closepic {
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    width: 25px;
    height: 25px;
}
 
.add-picture .selPic .picadd {
    display: block;
    width: 100%;
    height: 100%;
    background: url("../../assets/images/picadd.png");
    background-size: 100% 100%;
}
 
.add-picture .selPic input {
    display: none;
}
 
.add-picture .prompt {
    clear: both;
    margin: 0;
    font-size: 14px;
    color: #ff0000;
}

4、js相关代码

export default {
   data() {
        return {
           //  上传图片标识
           img_1: false,
           img_2: false,
           img_3: false,
           imgdata: {
                seledPic_1: "",
                seledPic_2: "",
                seledPic_3: ""
                },
           img_li1: true,
           img_li2: false,
           img_li3: false,
        }
    },
 methods: {
      // 判断图片上传类型
      produceImg(type, url) {
        let that = this;
        if (type == "seledPic_1") {
          that.img_1 = true;
          that.img_li2 = true;
          that.$set(that.imgdata, "seledPic_1", url);
        } else if (type == "seledPic_2") {
          that.img_2 = true;
          that.img_li3 = true;
          that.$set(that.imgdata, "seledPic_2", url);
        } else if (type == "seledPic_3") {
          that.img_3 = true;
          that.$set(that.imgdata, "seledPic_3", url);
        }
      },
      // 点击关闭按钮图片隐藏
      pichide(type) {
        let that = this;
        if (type == "seledPic_1") {
          if (that.imgdata.seledPic_1 != "") {
            that.img_1 = false;
            that.img_li2 = false;
          }
          if (that.imgdata.seledPic_2 != "") {
            that.img_1 = false;
            that.img_li2 = true;
          }
          if (that.imgdata.seledPic_3 != "") {
            that.img_1 = false;
            that.img_li2 = true;
            that.img_li3 = true;
          }
        } else if (type == "seledPic_2") {
          if (that.imgdata.seledPic_1 != "") {
            that.img_2 = false;
          }
          if (that.imgdata.seledPic_2 != "") {
            that.img_2 = false;
            that.img_li3 = false;
          }
          if (that.imgdata.seledPic_3 != "") {
            that.img_2 = false;
            that.img_li3 = true;
          }
        } else if (type == "seledPic_3") {
          that.img_3 = false;
        }
      },
      //start 上传图片
      onUpload(e, type) {
        let file = e.target.files[0];
        let filesize = file.size;
        let filename = file.name;
        if (filesize > 10485760) {
          alert("图片太大,无法上传");
        } else {
          let reader = new FileReader();
          // 将图片转为base64位
          reader.readAsDataURL(file);
          reader.onload = function(k) {
            // 读取到的图片base64 数据编码
            var imgcode = k.target.result;
            let data = {
              image: imgcode
            };
            axios({              
              url: "http://………………………………",//url地址
              method: "POST",
              data: qs.stringify(data)
            })
              .then(res => {
                let resdata = res.data;
                if (resdata.code == 200) {
                  let url = resdata.info;
                  this.produceImg(type, url);
                } else {
                  alert(resdata.msg);
                }
              })
              .catch(err => {
                console.log(err);
              });
          }.bind(this);
        }
      },
      //end结束图片
   }
} 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程网。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯