使用input实现上传图片

因为时间缘故(就是懒),所以有些在data里定义的值没有写出来，需要哪些东西或者字段的可以直接评论，我会一一给的。

html片段:

<div class="upload-img">
              <ul class="upload-lists">
                <li v-for="(item, index) in picLists" :key="index">
                  <img :src="item" alt="" />
                  <div class="caozuos">
                    <i
                      @click="deleteImgq(item, index)"
                      class="el-icon-delete"
                    ></i>
                  </div>
                </li>

                <li
                  v-if="picListEses == 1"
                  style="border: 1px solid black"
                  class="add-imgs el-icon-plus"
                >
                  <input @change="fileChangeqw" type="file" multiple />
                  <i v-if="!loadinges" class="iconfont icon-tianjia"></i>
                  <i v-else class="iconfont loadings icon-jiazai"></i>
                </li>
              </ul>
              <div
                class="preview-boxs"
                v-if="ispreviews"
                @click.self="ispreviews = false"
              >
                <img :src="previewItems" alt="" />
              </div>
            </div>

JS片段:

 data() {
    return {
      picLists: [],

      picListEses: 1,

      loadinges: false,

      ispreviews: false,

      previewItems: "", //用于预览
   }
},
methods:{
          fileChangeqw(e) {
      if (this.picLists.length > 20) {
        this.$message({
          message: "最多只能上传20张图片",
          type: "warning",
        });
        return;
      }
      var file = e.target.files[0];
      var list = e.target.files;
      var picLists = this.localPreview(list);
      for (let i = 0; i < picLists.length; i++) {
        var aa = picLists[i];
      }
      var formData = new FormData();
      this.ary.push(file);
      this.formDataes = formData;
      if (this.picLists.length == 19) {
        this.picListEses = "2";
      }
      this.picLists.push(aa);
      // this.$emit("changepic", this.picLists);
    },
 deleteImgq(item, index) {
      this.picLists.splice(index, 1);
      this.picListsa.splice(index, 1);
      //如果删除的图片小于20张了就把+显示出来
      if (this.picLists.length < 20) {
        this.picListEses = "1";
      }
      if (this.picListsa.length < 3) {
        this.picListsae = "1";
      }
      this.$emit("changepic", this.picListsa);
      this.$emit("changepic", this.picLists);
    },

SubmitCreationOrder() {
      var fomrDates=new FormData();
       //这里FormData用来给后台发送数据
      fomrDates.append('要给后台传的名字',给后台传的值);
      //这里的ListInsertorder是我封装好的接口  换成你的或者直接发axios请求就行
      // ListInsertorder(this.formDataes).then((res) => {
      //   console.log(res);
      // });
      this.openq = false;//因为我这个添加是一个Element里面的Dialog弹框，openq用来控制弹框是否显示
    },
  }