通過圖庫圖片或 VueJS 中的輸入文件上傳圖片

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 將圖像源設置為所選圖像

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

這是Codepen 示例