vue实现上传图片并显示

可以使用Vue的组件库element-ui来实现上传图片并显示。

首先，需要安装element-ui和axios：

npm install element-ui axios --save

然后，创建一个上传组件，代码如下：

<template>
  <div>
    <el-upload
      class="upload-demo"
      action=""
      :before-upload="beforeUpload"
      :on-success="onSuccess"
      :on-error="onError"
      :default-file-list="fileList">
      <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
      <el-button size="small" type="success" @click="submitUpload">上传到服务器</el-button>
      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
    </el-upload>
    <div class="image-preview">
      <img :src="imageUrl" v-show="imageUrl" alt="">
    </div>
  </div>
</template>

<script>
import { Message } from 'element-ui';
import axios from 'axios';

export default {
  data() {
    return {
      fileList: [],
      imageUrl: ''
    };
  },
  methods: {
    beforeUpload(file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
      const isLt500K = file.size / 1024 < 500;

      if (!isJPG) {
        Message.error('上传头像图片只能是 JPG/PNG 格式!');
      }
      if (!isLt500K) {
        Message.error('上传头像图片大小不能超过 500KB!');
      }
      return isJPG && isLt500K;
    },
    onSuccess(response, file, fileList) {
      if (response.code === 0) {
        this.imageUrl = response.data.url;
        Message.success('上传成功!');
      } else {
        Message.error(response.msg);
      }
    },
    onError(error, file, fileList) {
      Message.error('上传失败!');
    },
    submitUpload() {
      this.$refs.upload.submit();
    }
  }
};
</script>

<style scoped>
.upload-demo {
  display: inline-block;
  margin-bottom: 20px;
  width: 100%;
}
.image-preview img {
  max-width: 100%;
  height: auto;
}
</style>

在这个组件中，使用了element-ui中的el-upload组件来上传文件，并且限制了文件类型和大小。在上传成功后，将服务器返回的图片URL赋值给imageUrl，然后在页面上显示。

需要将action属性设置为空字符串，这样可以在before-upload事件中使用axios上传文件到服务器。在上传成功后，服务器会返回一个JSON格式的响应，其中包含了图片的URL。

在使用前需要在Vue的入口文件中引入element-ui和axios，并注册el-message组件：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
import axios from 'axios';

Vue.use(ElementUI);
Vue.prototype.axios = axios;

new Vue({
  el: '#app',
  render: h => h(App)
});

最后，在页面上引入这个组件即可：

<upload-image></upload-image>