[Q&A] 表示されているurlがどこに格納されているのか分からないです。

表示されているurlがどこに格納されているのか分からないです。

解決したいこと

下の画像のselect fileで選択したらjpg/pngと書かれているところの↓に選択した画像ファイルのurlが表示されるのですが、そのときのurlは下のプログラムのどこに格納されるのですか？

<template>
  <div id="avatar">
<el-upload
  class="upload-demo"
  ref="upload"
  action="http://localhost3000/"
  :auto-upload="false">
  <el-button slot="trigger" size="small" type="primary">select file</el-button>
  <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">upload to server</el-button>
  <div class="el-upload__tip" slot="tip">jpg/png files with a size less than 500kb</div>
</el-upload>
</div>
</template>
<script>
  export default {
    data(){
      return{

      }
    },
    methods: {
      submitUpload() {
        this.$refs.upload.submit();
      }
    }
  }
</script>

1Answer

@Yamazin posted at 2021-02-26

Element UIは使ったことがないですが、
ドキュメントを参照してサンプルを書いてみました。
（動作確認済み）

サンプル
「select file」ボタンを押下しファイル選択時、ファイル名を取得

HTML部分（抜粋）

<el-upload
  class="upload-demo"
  ref="upload"
  action="http://localhost3000/"
+  :on-change="onChange"
  :auto-upload="false">
  <el-button slot="trigger" size="small" type="primary">select file</el-button>
  <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">upload to server</el-button>
  <div class="el-upload__tip" slot="tip">jpg/png files with a size less than 500kb</div>
</el-upload>

SCRIPT部分（抜粋）

methods: {
  submitUpload() {
    this.$refs.upload.submit();
-  }
+  },
+  onChange(file, fileList) {
+    // ファイル名をコンソールへ出力
+    console.log(file.name);
+  },
}

参考URL
https://element.eleme.io/#/en-US/component/upload

Comments

@akihiro-inagaki
Questioner
yamazinさん何度もありがとうございます、助かります。

表示されているurlがどこに格納されているのか分からないです。

解決したいこと

1Answer

Comments

Your answer might help someone💌

Popular Questions