vue+php 上传附件并回显

最新推荐文章于 2025-03-06 23:30:00 发布

laoyaotask

最新推荐文章于 2025-03-06 23:30:00 发布

阅读量690

点赞数

分类专栏： PHP Web前端 Vue 文章标签： vue web php

本文链接：https://blog.youkuaiyun.com/laoyaotask/article/details/124366798

版权

本文介绍了一个使用Vue.js（结合bootstrap-vue）和PHP实现的文件上传功能，包括前端上传逻辑和后端处理。前端通过JS代码处理文件选择和上传，后端PHP代码接收文件并进行处理。同时，提到了Apache服务器配置中需调整允许上传文件大小的限制以确保上传成功。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端（使用了bootstrap-vue框架）：

    <div style="text-align: left;">
      <b-button size="md" pill variant="outline-primary" class="mt-2" @click="openFileWindow()"><span
          class="fa fa-plus"></span> 上传附件</b-button>
    </div>
    <input @change="uploadFile($event)" type="file" ref="fileuploader" style="display: none;"
      accept="image/*, audio/*,video/*" />
      
      <!--以下为回显文件，包括图片、视频两种类型-->
    <div>
      <div v-for="(file,index) in form.fileList" :key="index">
        <b-img v-if="file.includes('.jpg') || file.includes('.png')" thumbnail fluid
          :src="'http://127.0.0.1/static/uploadImg/'+file" height=