知识笔记（九十二）———vue实现图片上传

在Vue 3中进行图片上传可以使用第三方库或者自定义组件来完成。

如果想要使用现有的第三方库，比如element-plus、vant等UI库提供的上传组件，需要先安装对应的包并按照文档说明配置相关参数。然后根据官方示例编写代码即可。

<!-- App.vue -->
<template>
  <el-upload
    class="avatar-uploader"
    action="/your/upload/url" <!-- 设置上传地址 -->
    :show-file-list="false">
    <img v-if="imageUrl" :src="imageUrl" class="avatar">
    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
  </el-upload>
</template>
 
<script>
// main.js
import { createApp } from 'vue';
import ElementPlus from 'element-plus';
import App from './App.vue';
 
const app = createApp(App);
app.use(ElementPlus); // 注册Element Plus UI库
app.mount('#app');

export default {
  data() {
    return {
      imageUrl: '' // 存放上传成功后返回的图片URL
    };
  },
};
</script>