Question

在带有输入类型文件的以下示例中，带预览的图像上传效果很好，请指导如何从“从图库中拾取”图像中选择图像？

我希望行为与使用输入类型文件上传文件相同。

new Vue({
  el: "#app",
  data: {
        product_image: '',
    product_image_preview: ''
  },
  methods: {
        handleFileUpload(e) {
      const file = e.target.files[0];
      this.product_image = file;
      this.product_image_preview = URL.createObjectURL(file);
    }
  }
})

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li img{
  width: 80px;
  height: 60px;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div v-if="product_image_preview">
    <img :src="product_image_preview" style="width: 100px;height: 100px" />
  </div>
  <div v-else>
    <img src="https://dummyimage.com/100x100/000/fff" alt="">
  </div>
  <hr>
  <label for="product_image">Select Image</label>
  <input type="file" id="product_image" accept="image/*" ref="image" v-on:change="handleFileUpload">
  <h1>OR</h1>
  <h2> Pick From Gallery</h2>
  <div>
    <ul>
      <li>
        <img src="https://images.pexels.com/photos/210186/pexels-photo-210186.jpeg?cs=srgb&dl=time-lapse-photography-of-waterfalls-during-sunset-210186.jpg&fm=jpg" alt="">
        <img src="https://images.pexels.com/photos/733475/pexels-photo-733475.jpeg?cs=srgb&dl=photography-of-night-sky-733475.jpg&fm=jpg" alt="">
        <img src="https://images.pexels.com/photos/982263/pexels-photo-982263.jpeg?cs=srgb&dl=seawaves-on-sands-982263.jpg&fm=jpg" alt="">
      </li>
    </ul>
  </div>
</div>

Answer 1

将图库图像放入数组中，然后@click将图像src设置为所选图像

<li v-for="img in gallery">
  <img :src="img" @click="selected_iamge=img" >
</li>

这里是Codepen sample

通过图库图像或VueJS中的输入文件上传图像

1 个答案: