파일 업로드(vuetify)

파일 업로드(vuetify)

닫혔어. 이 질문은 더 많은 것이 필요해.집중적인그것은 현재 답을 받아들이고 있지 않다.

---

이 문제를 개선하고 싶으십니까?이 게시물을 편집하여 한 가지 문제에 초점을 맞추도록 질문을 업데이트하십시오.

2년 전에 문을 닫았다.

이 질문 개선

나는 Vue.js의 프런트엔드에 Vuetify.js 구성 요소를 사용하고 있는데 파일 업로드가 있는 사용자 등록 양식을 만들고 싶다.다음을 사용하여 폼을 만들 수 있다.v-text-field(Vuetify 구성 요소).

• 선택한 파일(입력)을 업로드하려면 어떻게 해야 하는가?
• 어떤 구성 요소를 사용해야 하는지 아니면 다른 방법이 있는지요?

Vue JS는 오늘까지 파일 입력 기능이 없으므로 v-text-field를 이미지 입력 필드처럼 작동하도록 조정할 수 있다.개념은 파일 입력 필드를 만든 다음 css를 사용하여 숨긴 다음 v-text 필드에 이벤트를 추가하여 해당 특정 파일 입력 필드를 이미지를 업로드하도록 트리거하는 것이다.내가 그것을 가지고 놀아주길 바라며, 나 또한 vue와 vuetify를 사용하여 만든 fiddle이 있으니, 이곳을 방문해라.고마워!

new Vue({
  el: '#app',
  data: () => ({
    title: "Image Upload",
    dialog: false,
    imageName: '',
    imageUrl: '',
    imageFile: ''
  }),

  methods: {
    pickFile() {
      this.$refs.image.click()
    },

    onFilePicked(e) {
      const files = e.target.files
      if (files[0] !== undefined) {
        this.imageName = files[0].name
        if (this.imageName.lastIndexOf('.') <= 0) {
          return
        }
        const fr = new FileReader()
        fr.readAsDataURL(files[0])
        fr.addEventListener('load', () => {
          this.imageUrl = fr.result
          this.imageFile = files[0] // this is an image file that can be sent to server...
        })
      } else {
        this.imageName = ''
        this.imageFile = ''
        this.imageUrl = ''
      }
    }
  }
})

<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet">
<link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet">
<div id="app">
  <v-app>
    <v-toolbar dark color="primary">
      <v-toolbar-side-icon></v-toolbar-side-icon>
      <v-toolbar-title class="white--text">{{ title }}</v-toolbar-title>
      <v-spacer></v-spacer>
      <v-btn icon @click="dialog = !dialog">
        <v-icon>link</v-icon>
      </v-btn>
    </v-toolbar>
    <v-content>
      <v-container fluid>
        <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center">
          <img :src="imageUrl" height="150" v-if="imageUrl"/>
          <v-text-field label="Select Image" @click='pickFile' v-model='imageName' prepend-icon='attach_file'></v-text-field>
          <input
            type="file"
            style="display: none"
            ref="image"
            accept="image/*"
            @change="onFilePicked"
          >
        </v-flex>
        <v-dialog v-model="dialog" max-width="290">
          <v-card>
            <v-card-title class="headline">Hello World!</v-card-title>
            <v-card-text>
              Image Upload Script in VUE JS
              <hr>
              Yubaraj Shrestha
              <br>http://yubarajshrestha.com.np/
            </v-card-text>
            <v-card-actions>
              <v-spacer></v-spacer>
              <v-btn color="green darken-1" flat="flat" @click.native="dialog = false">Close</v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>
      </v-container>
    </v-content>
  </v-app>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify/dist/vuetify.js"></script>

2019년 8월 11일자 게시물을 편집하는 동안 최신 버전(V2.0.5)에는 전용 파일 입력 옵션이 있다.공식 문서를 보려면 아래 링크를 클릭하십시오. https://vuetifyjs.com/en/components/file-inputs.

쉬운 요령은 다음과 같다.

<v-btn color="success" @click="$refs.inputUpload.click()">Success</v-btn>
<input v-show="false" ref="inputUpload" type="file" @change="yourFunction" >

다음 속성을 사용하여 입력을 생성하십시오.

• type=file
• ref=inputUploadID처럼 작동하고 원하는 대로 이름을 지을 수 있어
• v-show=false이것은 입력을 숨긴다.

그런 다음 버튼을 클릭하면 입력 업로드 버튼에서 클릭 이벤트가 발생하도록 버튼을 만드십시오.

이것은 우리가 미래에 추가할 것이지만 현재로는 그렇지 않다.github에 대한 논의가 진행 중이며, 여러 사용자가 현재 사용하고 있는 구현을 게시하고 있다. https://github.com/vuetifyjs/vuetify/issues/238

반가운 소식, 길보

버전 2.0.0.-beta.8부터 Vuetify에서 이용 가능하다.다음과 같이 사용해야 한다.

<template>
  <v-file-input accept=".txt" label="Select File..."></v-file-input>
</template>

편집(SNIPET 추가):

이미지 파일을 처리하기 위한 기본 용도는 다음과 같이 구현될 수 있다.

@Begueradj가 지적한 덕분에 취급할 필요조차 없다.@change파일 변경을 추적하고 보다 정확한 예를 만들기 위한 이벤트:

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    file: null,
    imageUrl: null
  }),
  methods: {
    onUpload() {
      console.log(this.file)
    }
  }
})

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@3.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

<div id="app">
  <v-app>
    <v-content>
      <v-container>
        <v-file-input 
          v-model="file" 
          label="Select Image File..." 
          accept="image/*"
        ></v-file-input>
        <v-btn color="primary" @click="onUpload">Upload</v-btn>
      </v-container>
    </v-content>
  </v-app>
</div>

참조URL: https://stackoverflow.com/questions/44989162/file-upload-in-vuetify