vue2背景图片上传

在Vue 2中实现背景图片上传的一种常见方法是使用`v-bind`指令和计算属性。

首先，你需要在你的组件中定义一个变量来存储上传的背景图片的URL。你可以在`data`属性中添加一个名为`backgroundImage`的变量：

data() {
  return {
    backgroundImage: ''
  }
}

接下来，你需要在模板中使用这个变量来设置背景图片。你可以使用`v-bind`指令将`backgroundImage`绑定到元素的`style`属性上：

<div :style="{ backgroundImage: 'url(' + backgroundImage + ')' }"></div>

这里的`:style`是`v-bind`的缩写形式。

然后，你需要实现一个方法来处理文件上传，并将上传的图片的URL赋值给`backgroundImage`变量。你可以使用`<input type="file">`元素来实现文件选择，然后在选中文件时触发一个函数：

<input type="file" @change="handleFileUpload">

在Vue组件的方法部分，你可以定义一个名为`handleFileUpload`的函数来处理文件上传：

methods: {
  handleFileUpload(event) {
    const file = event.target.files[0]
    const reader = new FileReader()

    reader.onload = (e) => {
      this.backgroundImage = e.target.result
    }

    reader.readAsDataURL(file)
  }
}

这里的`FileReader`对象用于读取文件内容，`readAsDataURL`方法将文件转换为Base64格式的URL，然后你可以将该URL赋值给`backgroundImage`。

这样，当用户选择一个文件进行上传时，背景图片将会更新为所选文件。

请注意，这只是一个简单的示例，你可能需要进行更多的错误处理和验证。另外，你可能需要添加样式来控制背景图片的大小和位置。