可以编写一个Vue上传图片的代码吗

当然可以。在Vue.js中，我们可以利用`vue-file-preview`这样的第三方库来实现图片的上传功能。以下是一个简单的示例：

首先，在`main.js`或`components/App.vue`等合适的地方安装`vue-file-preview`：

npm install vue-file-preview axios
# 或者
yarn add vue-file-preview axios

然后在组件中导入并使用它：

<template>
  <div>
    <input type="file" @change="uploadImage($event)">
    <vue-file-preview :files="previewFiles" :on-preview-end="handlePreviewEnd"></vue-file-preview>
  </div>
</template>

<script>
import VueFilePreview from 'vue-file-preview'
import axios from 'axios'

export default {
  components: {
    VueFilePreview,
  },
  data() {
    return {
      previewFiles: [],
    }
  },
  methods: {
    uploadImage(e) {
      const files = e.target.files;
      if (files.length > 0) {
        for (let file of files) {
          this.$refs.fileInput.submit(); // 模拟提交表单
          this.handleUpload(file);
        }
      }
    },
    handleUpload(file) {
      const formData = new FormData();
      formData.append('image', file);

      axios.post('/api/upload-image', formData)
        .then(response => {
          this.previewFiles.push({ src: response.data.url });
        })
        .catch(error => console.error('Error uploading image:', error));
    },
    handlePreviewEnd(file) {
      // 预览完成后，你可以在这里做其他处理
    },
  },
}
</script>

在这个例子中，我们创建了一个文件输入元素，并监听其改变事件。当用户选择图片时，`uploadImage`方法会处理上传操作。通过`axios`发送POST请求到服务器端的`/api/upload-image`，并将选中的图片作为FormData的一部分。成功上传后，图片的URL会被添加到`previewFiles`数组中显示。

注意：这只是一个基本示例，实际应用中可能需要处理更多边界情况，如错误处理、进度反馈等。同时，你需要将'/api/upload-image'替换为你的真实API路径。