使用vue调上传图片接口实现上传图片

以下是使用Vue调用上传图片接口实现上传图片的示例代码：

<template>
  <div>
    <input type="file" ref="fileInput" @change="uploadImage" />
    <img :src="imageUrl" v-if="imageUrl" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: null,
    };
  },
  methods: {
    async uploadImage() {
      const file = this.$refs.fileInput.files[0];
      const formData = new FormData();
      formData.append('image', file);
      try {
        const response = await this.$http.post('/api/upload-image', formData);
        this.imageUrl = response.data.imageUrl;
      } catch (error) {
        console.error(error);
      }
    },
  },
};
</script>

在上面的代码中，我们首先在模板中添加了一个文件输入框和一个图片元素，用于选择和展示上传的图片。

当用户选择图片文件后，我们在`uploadImage`方法中创建一个`FormData`对象，并将用户选择的图片文件添加到其中。

然后，我们使用`this.$http.post`方法发送一个POST请求到服务器的`/api/upload-image`接口，并将`FormData`对象作为请求体发送。

如果上传成功，服务器会返回一个包含上传图片的URL的JSON对象，我们将其保存到`imageUrl`数据属性中，并在模板中使用`v-if`指令判断是否显示图片元素。

如果上传失败，我们在控制台中打印错误信息。

需要注意的是，上面的代码中使用了Vue的异步请求插件（例如：axios、vue-resource），如果您使用的是其他插件或原生XMLHttpRequest对象，则代码可能会有所不同。