如何打开浏览文件夹以上传文件？

Question

我有 vue-upload-component。 我需要显示上传的图像并在每个图像按钮上显示以上传新图像。 据我了解，此插件没有更改上传文件的方法。 所以我想手动做。 但我不知道如何打开文件夹来选择文件。

如何打开新图像的浏览文件夹？

</template>
<div>
 <file-upload
   :ref="uploaderName"
   v-model="files"
   :input-id="uploaderName"
   :extensions="formats"
   :drop="drop"
   :multiple="multiple"
   @input-filter="inputFilter"
   >
    Upload a file
 </file-upload>
 <span>or drag and drop</span>
</div>

<div
 v-show="files.length && !loading"
 class="flex"
>
 <img
   v-for="image in files"
   :key="image.id"
   :src="image.url"
   :style="[imageSize]"
   class="uploaded-image p-2 mr-2 border rounded border-gray-200"
  >
  <button @click.prevent='() => uploadNew(image)'>
    Upload new
  </button>
  <button @click.prevent='() => removeFile(image)'>
    Remove
  </button>
</div>
</template>

<script>
import FileUpload from 'vue-upload-component';

export default {
  name: 'UploadFileForm',
  components: {
    FileUpload,
  },
  props: {
    uploaderName: {
      type: String,
      required: true,
      default: '',
    },
    formats: {
      type: Array,
      default: () => ['.jpg', '.jpeg', '.svg', '.png', '.webp'],
    },
    multiple: {
      type: Boolean,
      default: true,
    },
    drop: {
      type: Boolean,
      default: true,
    },
    imageWidth: {
      type: Number,
    },
    imageHeight: {
      type: Number,
    },
    value: {
      type: Array,
      default: () => {},
    },
  },
  data() {
    return {
      files: this.value || [],
      error: '',
      loading: false,
      hover: false,
      minImageWidth: 372,
      minImageHeight: 300,
    };
  },
methods: {
    removeFile(file) {
      this.$refs[this.uploaderName].remove(file);
    },
    uploadNew() {
      
    }
};
</script>

Answer 1

有不同的方法可以做到这一点。 一种是创建一个区域，您可以在select 一个文件上传或拖放上传。

<template>
  <div class="file-upload">
    <div
      class="text_field"
      @click="pickFile"
      @drop="uploadFile"
      @dragover.prevent
      @drop.prevent
    >
      <input
        id="file"
        ref="image"
        :accept="allowedFileTypes"
        style="display: none"
        type="file"
        @change="uploadFile"
      />
      <span v-if="fileUploading"> File uploading </span>
      <span v-else> Drag file here or click to upload </span>
    </div>
  </div>
</template>

脚本

<script>
export default {
  name: "UploadFile",
  data() {
    return {
      fileUploading: false,
      allowedFileTypes: ".pdf, .jpg, .jpeg, .png, .doc, .docx, .xls, .xlsx, video/*, audio/*",
    };
  },
  methods: {
    pickFile() {
      this.$refs.image.click();
    },
    async uploadFile(e) {
      this.fileUploading = true;
      const files = e.target.files || e.dataTransfer.files;
      if (!files.length) {
        return;
      }
      const file = document.getElementById("file").files[0];
      /* Creating a form element so that it can be detected as req.files (in Node.js, for example) */
      const fileForm = new window.FormData();
      fileForm.append("file", file);
      /* Simulating uploading of files, we wait for two seconds */
      setTimeout(() => {
        this.fileUploading = false;
      }, 2000);
      /* Below, you can make a request to your backend to post the image */
      /* await axios.post('your_upload_file_url', fileForm)
        .then(res => res)
        .catch((error) => Promise.reject(error))
        */
    },
  },
};
</script>

您也可以添加一些 styles

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.file-upload {
  border: 1px dashed #007991FF;
  border-radius: 5px;
  height: 192px;
  cursor: pointer;
  text-align: center;
  vertical-align: middle;
  span {
    position: relative;
    top: 75px;
    padding: 20px;
    font-size: 14px;
    color: #cac8c8;
  }
}
</style>