Vue3实现上传照片以及回显

• 一、安装Element Plus
• 二、案例
• • 1、基本示例
  • 三、进阶案例
  • • 1、代码
    • 2、代码解释
    • • 1、上传接口展示
      • 2、查询接口展示
      • 组件属性
      • 3、效果展示

        ---

        一、安装Element Plus

        使用 Element Plus 组件库来实现上传照片和回显同样很简单，你可以按照以下步骤进行：

        1. 安装 Element Plus：首先，确保你已经安装了 Element Plus。你可以在 Vue 3 项目中使用 npm 或 yarn 来安装 Element Plus：

           npm install element-plus --save
           

           或者

           yarn add element-plus
           

        2. 引入 Element Plus：在你的 Vue 3 项目中的 main.js 文件中引入 Element Plus 并注册组件库中的组件：

           import { createApp } from 'vue'
           import ElementPlus from 'element-plus';
           import 'element-plus/lib/theme-chalk/index.css';
           const app = createApp(App)
           app.use(ElementPlus)
           app.mount('#app')
           

        3. 创建上传组件：在 Vue 3 中使用 Element Plus 的 Upload 组件来实现上传照片功能，同时使用 Image 组件来显示上传的照片。

        4. 处理文件上传：在上传组件中，可以使用 Upload 组件的 file-list 属性来绑定一个文件列表，当用户上传文件时，该列表会自动更新。你可以在 Image 组件中使用这个文件列表来显示上传的照片。

        二、案例

        1、基本示例

        下面是一个简单的示例代码，演示了如何在 Vue 3 中使用 Element Plus 实现上传照片以及回显：

        在这个示例中，我们使用了 Element Plus 的 Upload 组件来实现文件上传，通过绑定 file-list 属性来控制文件列表。在 handleFileUpload 方法中，我们监听 Upload 组件的 change 事件，获取上传的文件，并使用 URL.createObjectURL 方法生成一个临时的 URL，然后将其赋值给 imageUrl 数据，以在页面上显示照片。

        三、进阶案例

        1、代码

        2、代码解释

        1、上传接口展示

        1. 接口中要求传入表单数据因此我使用了data属性。
        2. 接口要求文件的属性名为files，因此我用了name属性默认值为file，我重新赋值files。
        3. 这里的文件上传应用场景是图片因此我用了accept属性配置内容为属性。

           

        

        

        2、查询接口展示

        回显图片我用了调用接口方式，返回的内容为图片因此需要配置请求参数responseType

        

        组件属性

        

        

        3、效果展示

        

        

        ---

        1. 积极进取：勇敢迈出第一步，成功就在前方等待着你。
        2. 持之以恒：坚持不懈，才能攀登到人生的高峰。
        3. 自信自强：相信自己的能力，你就已经走出了成功的第一步。
        4. 心怀感恩：感恩生活中的每一个美好，懂得感恩，才能更加幸福。
        5. 勇敢面对：面对困难，不要退缩，因为你比困难更强大。
        6. 坚定目标：设立明确的目标，为之努力奋斗，成功必将如期而至。
        7. 学无止境：不断学习、不断进步，才能不断提升自我。
        8. 团结合作：团结一心，共同进步，困难会迎刃而解。
        9. 积极乐观：乐观面对生活，阳光总在风雨后。
        10. 勤奋拼搏：勤奋是通往成功的唯一道路，拼搏是成功的最好伴侣。