javascript - Vue memuat naik imej dan memaparkannya pada halaman.

Question

kod html
<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>

kod js

module.eksport = {

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);
    }
}

};

Kod js ini hanya dapat menyedari bahawa kawasan gambar pertama mempunyai gambar, dan kawasan gambar kedua yang dimuat naik tidak mempunyai gambar

Answer 1

Img kedua melintasi, tetapi kod JS anda tidak menolak imej ke dalam img, tetapi terus menolak ke dalam imej, jadi yang kedua tidak akan mempunyai imej. Anda boleh menentukan pembolehubah yang hendak dihantar dengan lulus parameter.

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

Kod JS

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);
      }

    }
  }
}