Vue实战：图片上传组件开发

<template>  <div>    <input      type="file"      @change="handleFileChange"    />    <button @click="upload">上传</button>    <div v-if="uploading">      <div>{{ progress }}%</div>      <button @click="cancel">取消上传</button>    </div>    <div v-if="uploadSuccess">      上传成功！      <a :href="resultURL" target="_blank">查看结果</a>    </div>  </div></template><script>export default {  data() {    return {      file: null,      uploading: false,      progress: 0,      uploadSuccess: false,      resultURL: ''    };  },  methods: {    handleFileChange(event) {      this.file = event.target.files[0];    },    upload() {      this.uploading = true;      // 假装上传，每秒增加10%的进度，共耗时10秒      const timer = setInterval(() => {        this.progress += 10;        if (this.progress >= 100) {          clearInterval(timer);          this.uploading = false;          this.uploadSuccess = true;          this.resultURL = 'http://example.com/result';        }      }, 1000);    },    cancel() {      this.uploading = false;      this.progress = 0;      this.uploadSuccess = false;    }  }};</script><style scoped>/* 样式省略 */</style>

<template>  <div id="app">    <ImageUpload />  </div></template><script>import ImageUpload from "./components/ImageUpload.vue";export default {  name: "App",  components: {    ImageUpload  }};</script><style>/* 样式省略 */</style>