Vue 实现图片上传是一项非常常见的需求，无论是前后端分离的项目还是传统的 Web 应用，都需要使用该功能。Vue 是一款前端框架，它可以很好地帮助我们处理这类问题。下面我们将详细讲解如何使用 Vue 实现图片上传。 首先，我们需要准备一个上传按钮，用来触发上传事件。在 HTML 中，我们可以通过 input 标签的 type 属性设置为 file 实现。如下：

<input type="file" @change="uploadImg" ref="fileInput"/>

其中，@change 属性是 Vue 中绑定事件的一种方式，当 input 输入框的值改变时，会执行 uploadImg 函数。ref 属性用于在 JavaScript 中获取该元素。 接下来，我们需要在 uploadImg 函数中处理上传逻辑。其中，我们首先需要从 input 中获取图片文件，可以使用以下代码：

const files = this.$refs.fileInput.files;
for (let i = 0; i < files.length; i++) {
const file = files[i];
const formData = new FormData();
formData.append('file', file);
// 发送请求
}

这里使用了 FormData 对象，它可以帮助我们将数据整合成一个 key-value 对象，并且方便发送 HTTP 请求。 接下来，我们使用 axios 发送 HTTP 请求，并在上传成功后获取服务器返回的 URL。如下：

axios.post('/api/upload', formData)
.then(res => {
console.log(res);
const imgUrl = res.data.url;
// 使用 imgUrl
})
.catch(err => {
console.error(err);
});

在上传成功后，我们可以使用 imgUrl 保存图片的 URL，以便于后续使用。 最后，我们将 imgUrl 渲染在页面上，以便用户预览和使用。我们可以使用 img 标签来显示上传的图片：

<img :src="imgUrl" alt=""/>

这里使用了 Vue 的数据绑定语法，将 imgUrl 绑定到了 img 标签的 src 属性上，从而实现预览功能。 综上所述，Vue 实现图片上传不仅需要 HTML 和 CSS 的协作，还需要使用 JavaScript 帮助实现上传和渲染逻辑。Vue 通过数据绑定等功能，使得图片上传功能的实现变得更加简单。我们只需要处理好上传和渲染即可。