vueコンポーネントのリンクに画像をアップロードするにはどうすればよいですか？このような

Question

マイコンポーネントVUE：

<template> 
    <div> 
     <ul class="list-inline list-photo"> 
      <li v-for="item in items"> 
       <div class="thumbnail" v-if="clicked[item]"> 
        <img src="https://myshop.co.id/img/no-image.jpg" alt=""> 
        <a href="javascript:;" class="thumbnail-check"><span class="fa fa-check-circle"></span></a> 
       </div> 
       <a v-else href="javascript:;" class="thumbnail thumbnail-upload" 
        title="Add Image" @click="addPhoto(item)"> 
        <span class="fa fa-plus fa-2x"></span> 
       </a> 
      </li> 
     </ul> 
    </div> 
</template> 
<script> 
    export default { 
     props: ['state', 'product'], 
     data() { 
       return { 
        items: [1, 2, 3, 4, 5], 
        clicked: [] // using an array because your items are numeric 
       } 
      } 
     }, 
     methods: { 
      addPhoto(item) { 
       this.$set(this.clicked, item, true) 
      } 
     } 
    } 
</script> 

私は、リンクをクリックした場合、それは、リンクをクリックした場合、それは画像をアップロードする私が欲しい

メソッドaddPhotoを呼び出します。それで、画像を選択してアップロードし、画像をアップロードしてimgを更新します。画像をアップロードするためのコードを追加写真方式

に置かれるようですが、私はまだVUEコンポーネントに画像をアップロードする困惑して見えます

どのように私はそれを解決することができますか？

Answer 1

あなたは、このようにファイルピッカーのためのコンポーネントを使用することができます。

<template> 
    <input v-show="showNative" type="file" :name="name" @change="onFileChanged" :multiple="multiple" :accept="accept"/> 
</template> 

<script> 

export default { 
    props: { 
    name: { type: String, required: true }, 
    show: { type: Boolean, Default: false }, 
    multiple: { type: Boolean, default: false }, 
    accept: { type: String, default: "" }, 
    showNative: { type: Boolean, default: false } 
    }, 
    watch: { 
    show(value) { 
     if (value) { 
     // Resets the file to let <onChange> event to work. 
     this.$el.value = ""; 

     // Opens select file system dialog. 
     this.$el.click(); 

     // Resets the show property (sync technique), in order to let the user to reopen the dialog. 
     this.$emit('update:show', false); 
     } 
    } 
    }, 
    methods: { 
    onFileChanged(event) { 
     var files = event.target.files || event.dataTransfer.files; 
     if (!files.length) { 
     return; 
     } 

     var formData = new FormData(); 

     // Maps the provided name to files. 
     formData.append(this.name, this.multiple ? files : files[0]); 

     // Returns formData (which can be sent to the backend) and optional, the selected files (parent component may need some information about files). 
     this.$emit("files", formData, files); 
    } 
    } 
} 
</script> 

そして、ここでそれを使用する方法をいくつかの情報：

• は、コンポーネントをインポート - >ディレクティブを宣言します。
• は、formDataの作成（バックエンドに行く名前）に - >を使用します。
• プロパティを表示するには 注：同じページに複数回開く必要がある場合は、同期をお勧めします。下の例を確認してください。
• 複数のファイルセレクトとして使用する場合は、パラメータとして選択されたファイルの配列を取得するために、選択されたファイルの配列を取得するために、
• を入力してから、そのプロパティをtrueに設定します（sync /！\ 。
• ファイルをフィルタリングするためにpropを使用します（有効な受け入れタイプ：HTML Input="file" Accept Attribute File Type (CSV)）。
• trueに設定されている場合、コンポーネントは 'ファイル選択'ボタン（入力タイプファイル）を表示し、それ以外の場合は非表示になり、Jsによってウィンドウが表示されます。

例： シングル選択

<file-upload name="fooImport" @files="selectedFile" :show.sync="true" /> 

例： 複数選択

<file-upload name="barUpload" @files="selectedFiles" :show.sync="displayUpload" accept="text/plain, .pdf" />