vueUpload图片上传

图片上传

上传前

代码如下，仅供参考：
html代码：

<div>
   <input
    type="file"
    accept="image/*"
    @change="changeImage()"
    ref="avatarInput"
    style="display:none"/>
       <div class="pic_list_box">
          <div class="pic_list" v-show="imgDatas.length">
             <div v-for="(src,index) in imgDatas" :key="index">
             <!-- <img :src="src" width="80" height="80" alt srcset /> -->
             <!-- 利用element-ui的图片预览插件 -->
             <el-image
              style="width: 319px; height: 298px"
              :src="src"
              :preview-src-list="imgDatas"
              ></el-image>
          	 </div>
            </div>
         <!-- 替换自己的上传图标 -->
        <i class="iconfont icontup img-icon" @click="upLoad"></i>
        <!-- <img style="margin-top:35px;margin-left:20px" class="upload_btn" @click="upLoad" src="../../assets/decorate/upimg.png" alt /> -->
	</div>
</div>

js代码：

<script>
export default {
  data() {
    return {
      imgDatas: [],
    };
  },
  methods: {
    changeImage() {
      // 上传图片事件
      var files = this.$refs.avatarInput.files;
      var that = this;
      function readAndPreview(file) {
        //Make sure `file.name` matches our extensions criteria
        if (/\.(jpe?g|png|gif)$/i.test(file.name)) {
          var reader = new FileReader();
          reader.onload = function (e) {
            // 防止重复上传
            if (that.imgDatas.indexOf(e.target.result) === -1) {
              that.imgDatas.push(e.target.result);
            }
          };
          reader.readAsDataURL(file);
        }
      }
      readAndPreview(files[0]);
      if (files.length === 0) {
        return;
      }

      // 文件上传服务器
      // this.setUploadFile(files[0])
    },
    setUploadFile(file) {
      this.formData = new FormData();
      this.formData.append("files", file, file.name); // 添加到请求体
      this.$http
        .post("/api/dxbase/upload?resType=EVENT", this.formData)
        .then((res) => {
          console.log(res);
        });
    },
    upLoad() {
      // 触发上传图片按钮
      this.$refs.avatarInput.dispatchEvent(new MouseEvent("click"));
    },
  },
};
</script>

css 代码：

.pic_list_box {
  display: flex;
}
.upload_btn {
  width: 24px;
  height: 22px;
  padding-left: 15px;
}
.pic_list {
  display: flex;
}

整体代码：

<template>
  <div class="overflow">
    <div class="margin-top-20 fl">
      <img src="../../assets/decorate/shmb2.png" alt />
    </div>
    <div class="fr you-box">
      <div class="shezhi-box fl">
        <div class="sh-box">
          <div class="iconfont iconshezhi font-s22 margin-top-5 cursor"></div>
          <div class="iconfont iconxiangshangjiantoucuxiao font-s22 margin-top-5 cursor"></div>
          <div class="iconfont iconxiangxiajiantoucuxiao font-s22 margin-top-5 cursor"></div>
          <div class="iconfont iconxing font-s22 margin-top-5 cursor"></div>
          <div class="iconfont iconshanchu font-s22 margin-top-5 cursor"></div>
        </div>
      </div>
      <div class="cont-box fl">
        <div class="top-box">
          自定义模块
          <i class="iconfont iconcha fr cursor"></i>
        </div>
        <div class="black font-s18 margin-top-20 margin-bot-20">选择分类</div>
        <div class="">
            <select class="fenlei">
                <option>全部作品</option>
                <option>全部作品1</option>
                <option>全部作品2</option>
                <option>全部作品3</option>
            </select>
        </div>
        <div class="black font-s18 margin-top-20 margin-bot-20">全局背景</div>
        <div class="img-box">
            <div>
              <input
                type="file"
                accept="image/*"
                @change="changeImage()"
                ref="avatarInput"
                style="display:none"
              />
              <div class="pic_list_box">
                <div class="pic_list" v-show="imgDatas.length">
                  <div v-for="(src,index) in imgDatas" :key="index">
                    <!-- <img :src="src" width="80" height="80" alt srcset /> -->
                    <!-- 利用element-ui的图片预览插件 -->
                    <el-image
                      style="width: 319px; height: 298px"
                      :src="src"
                      :preview-src-list="imgDatas"
                    ></el-image>
                  </div>
                </div>
                <!-- 替换自己的上传图标 -->
                <i class="iconfont icontup img-icon" @click="upLoad"></i>
                <!-- <img style="margin-top:35px;margin-left:20px" class="upload_btn" @click="upLoad" src="../../assets/decorate/upimg.png" alt /> -->
              </div>
            </div>
        </div>
        <div class="cont-box-btn">
          <button class>保存</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgDatas: [],
    };
  },
  methods: {
    changeImage() {
      // 上传图片事件
      var files = this.$refs.avatarInput.files;
      var that = this;
      function readAndPreview(file) {
        //Make sure `file.name` matches our extensions criteria
        if (/\.(jpe?g|png|gif)$/i.test(file.name)) {
          var reader = new FileReader();
          reader.onload = function (e) {
            // 防止重复上传
            if (that.imgDatas.indexOf(e.target.result) === -1) {
              that.imgDatas.push(e.target.result);
            }
          };
          reader.readAsDataURL(file);
        }
      }
      readAndPreview(files[0]);
      if (files.length === 0) {
        return;
      }

      // 文件上传服务器
      // this.setUploadFile(files[0])
    },
    setUploadFile(file) {
      this.formData = new FormData();
      this.formData.append("files", file, file.name); // 添加到请求体
      this.$http
        .post("/api/dxbase/upload?resType=EVENT", this.formData)
        .then((res) => {
          console.log(res);
        });
    },
    upLoad() {
      // 触发上传图片按钮
      this.$refs.avatarInput.dispatchEvent(new MouseEvent("click"));
    },
  },
};
</script>

<style scoped>
@import url("../../../static/css/lj-common.css");
.you-box {
  margin-top: 60px;
  margin-left: 20px;
}
.shezhi-box {
  width: 56px;
  height: 219px;
  padding-top: 20px;
  background: #ccccccff;
}
.sh-box {
  width: 31px;
  /* height: 203px; */
  background: #fff;
  margin-left: 8px;
  padding-left: 8px;
}
.iconfont {
  color: #666666ff;
}
.iconfont:hover {
  color: #d7000fff;
}
.cont-box {
  width: 317px;
  /* height: 522px; */
  margin-left: 10px;
  border: 1px solid #ccccccff;
  padding: 10px 10px;
}
.cont-box .top-box {
  width: 300px;
  height: 40px;
  background: #f5f5f5ff;
  color: #333333ff;
  font-size: 18px;
  line-height: 40px;
  padding-left: 20px;
}
.upimg {
  width: 150px;
  height: 150px;
  border: 1px dashed #ccc;
}
.upimg2 {
  border: 1px dashed #ccc;
  height: 90px;
  margin-top: 10px;
}
.cont-box-btn {
  width: 100%;
  text-align: center;
}
.cont-box-btn > button {
  width: 100px;
  height: 29px;
  background: rgba(215, 0, 15, 1);
  border-radius: 4px;
  color: #fff;
  font-size: 16px;
  margin-bottom: 20px;
  margin-top: 80px;
}
.pic_list_box {
  display: flex;
}
.upload_btn {
  width: 24px;
  height: 22px;
  padding-left: 15px;
}
.pic_list {
  display: flex;
}
.fenlei {
    width: 316px;
    height: 40px;
    background: rgba(255,255,255,1);
    border: 1px solid rgba(204,204,204,1);
    border-radius: 4px;
    font-size: 16px;
    color: #999999;
    cursor: pointer;
}
.img-box {
    height: 296px;
    width: 100%;
    border: 1px solid #ccc;
    background: #F5F5F5FF;
}
.img-icon {
    font-size: 30px;
    cursor:pointer;
    margin-top: 125px;
    margin-left: 140px;
}
</style>