HelloWorld.vue

<template>
  <v-container>
    <v-row class="text-center">
      <v-col cols="12">
        <v-img
          :src="require('../assets/logo.svg')"
          class="my-3"
          contain
          height="200"
        />
      </v-col>

      <v-col class="mb-4">
        <h1 class="display-2 font-weight-bold mb-3">
          Skynet Test
        </h1>

        <v-file-input label="Upload to Skynet" :loading="progress < 1" @change="uploadFile"></v-file-input>
      </v-col>
    </v-row>
    <v-row>
      <v-col col="4">
        <v-list>
          <v-list-item v-for="(file, index) in uploads" :key="index">
            <v-list-item-title>{{ file.name }}</v-list-item-title>
            <v-list-item-subtitle>
              <a :href="`/${file.skylink}`" target="_blank" rel="noopener noreferrer">
                {{ file.skylink }}
              </a>
            </v-list-item-subtitle>
          </v-list-item>
        </v-list>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
import { SkynetClient } from "skynet-js";
const client = new SkynetClient("https://siasky.net");

  export default {
    name: 'HelloWorld',

    data: () => ({
      uploads: [],
      progress: 1
    }),

    methods: {

      uploadFile: async function(file) {
        const onUploadProgress = (progress) => {
          this.progress = progress;
        };

        const { skylink } = await client.upload(file, { onUploadProgress });
        this.uploads.push({
          name: file.name,
          skylink
        })
      },
    }
  }
</script>