vue2点击按钮实现上传图片并更改为背景图

你可以使用`<input type="file">`元素来让用户选择要上传的图片，然后使用JavaScript来更改背景图。

首先，在模板中添加一个`<input type="file">`元素和一个按钮：

<template>
  <div>
    <input type="file" @change="handleFileUpload">
    <button @click="setBackgroundImage">设置背景图</button>
  </div>
</template>

然后，在Vue实例中定义一个`selectedFile`属性来存储选择的文件，以及一个`setBackgroundImage`方法来将选择的文件设置为背景图：

<script>
export default {
  data() {
    return {
      selectedFile: null
    }
  },
  methods: {
    handleFileUpload(event) {
      this.selectedFile = event.target.files[0]
    },
    setBackgroundImage() {
      const reader = new FileReader()
      reader.readAsDataURL(this.selectedFile)
      reader.onload = (event) => {
        const backgroundImageUrl = event.target.result
        document.body.style.backgroundImage = `url(${backgroundImageUrl})`
      }
    }
  }
}
</script>

在`handleFileUpload`方法中，我们将选择的文件存储在`selectedFile`属性中。在`setBackgroundImage`方法中，我们使用`FileReader`对象来读取文件内容，并将其转换为DataURL。然后，我们将DataURL设置为背景图的URL。

请注意，这里我们直接将背景图设置为`document.body`的背景图。在实际应用中，你可能需要根据具体情况将背景图设置为其他元素的背景图。