Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

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

解決したいこと

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

スクリーンショット 2021-02-26 151449.png

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

1Answer

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

1Like

Comments

  1. yamazinさん何度もありがとうございます、助かります。

Your answer might help someone💌