在 Vue.js 中一次选择多个图像

Posted 2023-02-16

【中文标题】在 Vue.js 中一次选择多个图像

【英文标题】：Select Multiple images at a time in Vue.js

【发布时间】：2021-02-14 19:03:48

【问题描述】：

我想一次选择多个图像。在这里，单选起作用了：

https://jsfiddle.net/jfwv04mu/

html：

<div id="app">
  <h2>Images:</h2>
  <div class="row m-2">
    <div v-for="(data, index) in rawData" class="image-input image-input-active d-flex">
      <div class="image-preview">
         <img class="img-responsive h-100" :src="data">
        <button class="btn btn-xs remove-file" @click="removeFile(index)">
          <i class="fa fa-trash " ></i>
        </button>
      </div>
       <input type="radio" name="imgType">
  </div>
 
  <div class="image-input image-input-tbd d-flex" v-if="this.files.length < this.option.maxFileCount">
    <div class="image-preview dropzone d-flex justify-content-center align-items-center" @drop="loaddropfile" @click="openinput">
      <i class="fa fa-plus text-success"></i>
    </div>
    <input type="file" class="d-none" id="vue-file-upload-input" @change="addImage">
  </div>
  </div>
  <div class="row justify-content-center m-2">
    <button class="btn btn-primary" @click="upload">Upload</button>
  </div>
  
  <div class="row">
  
  
  <div id="dropContainer" style="border:1px solid black;height:100px;">
   Drop Here
</div>
  Should update here:
  <input type="file" id="fileInput" />
  </div>
</div>

唯一的问题是我想一次选择多张图片，但目前的情况是我一次只能选择一张图片。我正在尝试但要实现多项选择，但它不起作用。

【问题讨论】：

我似乎找不到有关同时使用 jQuery 和 Vue 的信息。这里有一些关于使用 jQuery 的好信息。 ***.com/questions/166221/…

@natel：谢谢，但我想在 vue.js 中使用它

请在问题本身中包含与问题相关的所有代码。不让我们离开现场查找关键信息，让我们尽可能轻松地为您提供帮助。

【参考方案1】：

您需要更新 input[file] 元素并包含属性 => 多个 例如

然后在您的“addImage”处理程序中，您需要更正代码以读取 for 循环中的所有图像，而不是第一个“tmpFiles[0]”

addImage:function()

  const tmpFiles = e.target.files
  if (tmpFiles.length === 0) 
    return false;
  
    const self = this

  for(var f in tmpFiles)
    const file = tmpFiles[f]

    this.files.push(file)

    const reader = new FileReader()
    reader.onload = function(e) 
      self.rawData.push(e.target.result)
    
    reader.readAsDataURL(file)
  //for

这是小提琴 https://jsfiddle.net/c92oqy1w/5/

【讨论】：

TypeError: 无法在“FileReader”上执行“readAsDataURL”：参数 1 不是“Blob”类型，你能告诉我为什么我在 condole 中收到此错误，它在 js fiddle控制台

也许您选择的文件不是图像？我已检查以仅允许图像文件jsfiddle.net/9bvfnp0m

谢谢，现在解决了我选择图像文件，即 jpeg。我选择了 jpeg 图像文件，小提琴中还有一个错误，v-on 处理程序中的错误：TypeError：无法读取未定义的属性“匹配”，你可以看看