javascript - vue上传图片，并显示在页面中的插件

Question

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>

js代码

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

};

这个js代码，只能实现第一个图片区域有图，第二个上传图片区没有图

Answer 1

第二个遍历的img，但是你的JS代码里面并没有往img里面push图片，而是一直往images里面Push，所以第二个是不会有图的。可以通过传参数的方式来判断往哪个变量里面传。

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

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

    }
  }
}