使用vue写一个图片上传和浏览器打开的前端页面

以下是一个简单的使用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>

在上面的示例中，我们使用了Vue的模板语法来渲染页面。页面上有一个文件上传框和一个打开浏览器的按钮，当用户选择上传图片后，图片会被预览出来；当用户点击打开浏览器按钮后，会打开百度网站。

在methods中，我们定义了两个方法：previewImage和openBrowser。previewImage方法用于预览上传的图片，使用了FileReader对象来读取文件内容，并将结果赋值给imageUrl变量，从而实现预览图片；openBrowser方法用于打开浏览器，使用了window.open函数来打开指定的URL地址。

最后，我们在style中定义了一些CSS样式，用于美化页面