上传图像时附加Textarea (描述)

Question

我在Vue.js中有一个基本的文件上传。我正在尝试添加一个文本区域，以便我可以添加关于该文件的描述。但是，我看不出这件事能起作用。这个想法是通过我用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>

我试图为每个文件添加一个描述。有人有什么想法吗？

Answer 1

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

<template>
  <div class="container">
    Files
    <input
      id="files"
      ref="files"
      type="file"
      multiple
      @change="handleFilesUpload()"
    />
    <div v-for="(item, key) in files" :key="key" class="file-listing">
      {{ item.file.name }}
      <textarea
        v-model="item.description"
        name="description"
        cols="30"
        rows="10"
      ></textarea>
      <span class="remove-file" @click="removeFile(key)">Remove</span>
    </div>
    <button @click="addFiles()">Add Files</button>
    <button @click="submitFiles()">Submit</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      files: [],
      description: ''
    }
  },
  methods: {
    addFiles() {
      this.$refs.files.click()
    },
    submitFiles() {
      let formData = new FormData()
      for (var i = 0; i < this.files.length; i++) {
        let item = this.files[i]
        formData.append('files[' + i + ']', item.file)
        formData.append('description[' + i + ']', item.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({
          file: uploadedFiles[i],
          description: ''
        })
      }
    },
    removeFile(key) {
      this.files.splice(key, 1)
    }
  }
}
</script>

参见工作示例这里

Answer 2

     <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>

1. 使用相对位置和绝对位置将摄像机图标放置在文本区域内。
2. 使用底部-3右-4找到合适的位置。
3. 将默认上传文件图标更改为照相机图标