javascript - Vue uploads images and displays them on the page.

Question

htmlcode
<p class="bg_white">

            <p class="content_mission">
                <span>我的任务<span style="padding: 0;"> ( 1 )</span></span>
                <span></span>
                <span id="myMission" class="mui-icon mui-icon-arrowright" @click="myMission"></span>
            </p>
            <p class="mission_list">
                <ul>
                    <li>
                        <span class="mission_img">
                            <span class="mui-icon mui-icon-plusempty file">
                                <p class="vue-upload-img-multiple">
                                    <p v-if="images.length >0">
                                      <ul>
                                        <li v-for="image in images">
                                              <img class="img" style="width: 100%; height: 100%; position: absolute;top:0;left:0;z-index: 9;" :src="image"  />
                                              <a href="javascript:void(0);" style="position: absolute;top: -30px; right: 0;z-index: 10;color: red;" >
                                                <span class="mui-icon mui-icon-close" @click='delImage($index)'></span>
                                              </a>
                                        </li>
                                      </ul>
                                    </p>
                                    <p>
                                          <p v-if="!image">
                                            <input type="file" @change="onFileChange">
                                          </p>
                                         <p v-else>
                                            <img :src="image" />
                                            <button @click="removeImage">Remove image</button>
                                          </p>
                                    </p>
                                  </p>
                            </span>
                        </span>
                        <span class="mission_particulars">
                            <p class="mission_details">
                                <span class="mission_name">【四带】老带新</span>
                                <span class="mission_score"><span>2</span>分</span>
                            </p>
                            <p class="mission_progress"><span>进行中</span></p>
                            <p class="mission_time_evaluation">
                                <span class="mission_time">2017年6月</span>
                                <span class="mission_evaluation">评价:<span>3</span>人</span>
                            </p>
                        </span>
                    </li>
                    <li>
                        <span class="mission_img">
                            <span class="mui-icon mui-icon-plusempty file">
                                <p class="vue-upload-img-multiple">
                                    <p v-if="img.length >0">
                                      <ul>
                                        <li v-for="image in img">
                                              <img style="width: 100%; height: 100%; position: absolute;top:0;left:0;z-index: 9;" :src="image"  />
                                              <a href="javascript:void(0);" style="position: absolute;top: -30px; right: 0;z-index: 10;color: red;" >
                                                <span class="mui-icon mui-icon-close" @click='delImage($index)'></span>
                                              </a>
                                        </li>
                                      </ul>
                                    </p>
                                    <p>
                                          <p v-if="!image">
                                            <input type="file" @change="onFileChange">
                                          </p>
                                         <p v-else>
                                            <img :src="image" />
                                            <button @click="removeImage">Remove image</button>
                                          </p>
                                    </p>
                                  </p>
                            </span>
                        </span>
                        <span class="mission_particulars">
                            <p class="mission_details">
                                <span class="mission_name">【四带】老带新</span>
                                <span class="mission_score"><span>2</span>分</span>
                            </p>
                            <p class="mission_progress"><span>进行中</span></p>
                            <p class="mission_time_evaluation">
                                <span class="mission_time">2017年6月</span>
                                <span class="mission_evaluation">评价:<span>3</span>人</span>
                            </p>
                        </span>
                    </li>
                </ul>
            </p>
        </p>

js code

module.exports = {

name: 'Upload',
data: function(){
    return {
        images: [],
        img:[]
    }
},
    onFileChange:function (e) {
        var dom=e.currentTarget;
          var files = e.target.files || e.dataTransfer.files;
          if (!files.length) return;
        this.createImage(files);
          
    },
    createImage (file) {
          var vm = this;
          var reader = null;
          var leng = file.length;
          for (var i = 0; i < leng; i++) {
            reader = new window.FileReader();
            reader.readAsDataURL(file[i]);
            reader.onload = function (e) {
                    vm.images.push(e.target.result);
            }
          }
    },
    removeImage: function (e) {
          this.images = [];
    },
    delImage: function (index) {
          this.images.shift(index);
    }
}

};

This js code can only realize that the first picture area has pictures, and the second uploaded picture area does not have pictures

Answer 1

The second traversed img, but your JS code does not push the image into the img, but keeps pushing into the images, so there will be no image in the second one. You can determine which variable to pass to by passing parameters.

<p v-if="!image">
  <input type="file" @change="onFileChange($event,1)">
</p>

JS code

onFileChange:function (e, index) {
  const dom = e.currentTarget;
  const files = e.target.files || e.dataTransfer.files;
  if (!files.length) return;
  this.createImage(files, index);
},
createImage (file, index) {
  const me = this;
  for (let i = 0; i < file.length; i++) {
    const reader = new window.FileReader();
    reader.readAsDataURL(file[i]);
    reader.onload = function (e) {
    //在这里对index做判断来处理
      if (index == 1) {
        me.images.push(e.target.result);
      } else {
          me.img.push(e.target.result);
      }

    }
  }
}