Vue 图片上传预览并打开浏览器示例

<template>
  <div>
    <h1>图片上传和浏览器打开</h1>
    <div>
      <input type='file' @change='previewImage' accept='image/*'>
      <button @click='openBrowser'>打开浏览器</button>
    </div>
    <div v-if='imageUrl'>
      <img :src='imageUrl' alt='预览图' width='200'>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        imageUrl: null
      }
    },
    methods: {
      previewImage(event) {
        const file = event.target.files[0]
        const reader = new FileReader()
        reader.readAsDataURL(file)
        reader.onload = () => {
          this.imageUrl = reader.result
        }
      },
      openBrowser() {
        window.open('https://www.baidu.com')
      }
    }
  }
</script>
<style>
  /* 样式可以根据自己需求来设置 */
  h1 {
    font-size: 24px;
    margin-bottom: 20px;
  }
  input[type=file] {
    margin-right: 10px;
  }
  img {
    margin-top: 20px;
  }
</style>
<p>在上面的示例中，我们使用了 Vue 的模板语法来渲染页面。页面上有一个文件上传框和一个打开浏览器的按钮，当用户选择上传图片后，图片会被预览出来；当用户点击打开浏览器按钮后，会打开百度网站。</p>
<p>在 methods 中，我们定义了两个方法：previewImage 和 openBrowser。previewImage 方法用于预览上传的图片，使用了 FileReader 对象来读取文件内容，并将结果赋值给 imageUrl 变量，从而实现预览图片；openBrowser 方法用于打开浏览器，使用了 window.open 函数来打开指定的 URL 地址。</p>
<p>最后，我们在 style 中定义了一些 CSS 样式，用于美化页面。</p>