使用 vue.js 在图像上传时保存图像类型

Posted 2023-02-16

【中文标题】使用 vue.js 在图像上传时保存图像类型

【英文标题】：Save image type on image upload using vue.js

【发布时间】：2021-02-01 11:14:53

【问题描述】：

我正在尝试使用 vue.js 上传图像，该图像将是多个图像，用户可以预览这些图像，但我也想保存图像类型，即用户可以从正在上传的图像组中设置主图像，我为此提供了一个单选按钮，默认情况下，第一个将是主要的，其他图像将是次要的。非常感谢有关如何使用图像保存类型的任何帮助。

JS 小提琴：

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>

Vue：

new Vue(
  el: "#app",
  data() 
    return 
      option: 
        maxFileCount: 3
      ,
      files:[],
      rawData: [],
    
  ,
  methods: 
    loaddropfile: function(e) 
        e.preventDefault()
      e.stopPropagation()
        alert('ok')
        console.log(e)
    ,
    openinput: function() 
        document.getElementById("vue-file-upload-input").click();
    ,
    addImage: function(e) 
        const tmpFiles = e.target.files
      if (tmpFiles.length === 0) 
        return false;
      
      const file = tmpFiles[0]
      this.files.push(file)
      const self = this
        const reader = new FileReader()
      reader.onload = function(e) 
        self.rawData.push(e.target.result)
      
      reader.readAsDataURL(file)
    ,
    removeFile: function(index) 
        this.files.splice(index, 1)
      this.rawData.splice(index, 1)
      document.getElementById("vue-file-upload-input").value = null
    ,
    upload: function() 
        alert('Check console to see uploads')
        console.log(this.files)
    
  ,
  mounted()
  dropContainer.ondragover = dropContainer.ondragenter = function(evt) 
  evt.preventDefault();
;

dropContainer.ondrop = function(evt) 
  // pretty simple -- but not for IE :(
  fileInput.files = evt.dataTransfer.files;
  evt.preventDefault();
;
  
)

【问题讨论】：

你的意思是<input type="file" accept="image/*" > 吗？

@Mohsen：我想在每个字段中再添加一个单选按钮，以识别我想为滑块设置的主要图像，例如。如果我检查了第二张图片，那么第二张图片将是主要图片，其 img_type 将在数据库中保存为 1 并显示在顶部。

【参考方案1】：

绑定:value="index"并将v-model="primaryimag"添加到单选按钮以存储所选图像

<input type="radio" name="imgType" :value="index" v-model="primaryimg">

检查更新您的 JS 小提琴：https://jsfiddle.net/6hvk4dtq/