Vue.js 上传图像时追加文本区域（说明）

我在Vue.js中上传了一个基本文件。我正在尝试附加一个textarea，以便添加有关该文件的说明。然而，我看不出这能起什么作用。这个想法是能够通过我在laravel中创建的API发送文件

<template>
  <div class="container">
        Files
        <input type="file" id="files" ref="files" multiple v-on:change="handleFilesUpload()" />
      <div v-for="(file, key) in files" :key="file.id" class="file-listing">
        {{ file.name }}
          <textarea
            name="description"
            id="description"
            cols="30"
            rows="10"
            v-model="description"
          ></textarea>
        <span class="remove-file" v-on:click="removeFile( key )">Remove</span>
      </div>
      <button v-on:click="addFiles()">Add Files</button>
      <button v-on:click="submitFiles()">Submit</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      files: [],
      description: ""
    };
  },
  methods: {
    addFiles() {
      this.$refs.files.click();
    },
    submitFiles() {
      let formData = new FormData();
      let description = this.description;
      description = JSON.stringify(description);
      for (var i = 0; i < this.files.length; i++) {
        let file = this.files[i];

        formData.append("files[" + i + "]", file);
        formData.append("description[" + i + "]", description);
      }
      axios
        .post("/media", formData, {
          headers: {
            "Content-Type": "multipart/form-data"
          }
        })
        .then(function() {
          console.log("SUCCESS!!");
        })
        .catch(function() {
          console.log("FAILURE!!");
        });
    },

    handleFilesUpload() {
      let uploadedFiles = this.$refs.files.files;
      for (var i = 0; i < uploadedFiles.length; i++) {
        this.files.push(uploadedFiles[i]);
      }
    },
    removeFile(key) {
      this.files.splice(key, 1);
    }
  }
};
</script>

文件夹
{{file.name}
去除
添加文件
提交
导出默认值{
数据（）{
返回{
文件：[]，
说明：“”
};
},
方法：{
addFiles（）{
这是.refs.files.click（）；
},
提交文件（）{
设formData=new formData（）；
让description=this.description；
description=JSON.stringify（description）；
对于（var i=0；i

---

我正在尝试为每个文件添加说明。有人有什么想法吗

这里有一个描述模型，但每个文件都需要一个描述模型。 让我们来定义它们

文件夹
{{item.file.name}
去除
添加文件
提交
导出默认值{
数据（）{
返回{
文件：[]，
说明：“”
}
},
方法：{
addFiles（）{
这是。$refs.files。单击（）
},
提交文件（）{
设formData=new formData（）
对于（var i=0；i

参见工作示例

描述

使用“相对位置”和“绝对位置”将相机图标放置在 文本区

使用底部-3右-4找到正确的位置

将默认上载文件图标更改为相机图标

---

是否尝试为每个文件添加说明？还是为所有文件添加一个？@talkhabi我正在为每个文件添加描述非常感谢！我能看到你添加的内容！谢谢你的帮助

     <div class="field relative">
        <label>Description</label>
        <textarea class="textarea" v-model="description" type="text" maxlength="10000"> </textarea>
        <label for="upload-file" class="icn icn-camera cursor-pointer absolute bottom-3 right-4">
          <input type="file" id="upload-file" hidden ref="file" @change="getImage($event)" accept="image/**" />
        </label>
      </div>