vue使用el-upload实现formData文件上传功能

最新推荐文章于 2024-09-12 14:31:28 发布

A-sleep

最新推荐文章于 2024-09-12 14:31:28 发布

阅读量965

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/fellasleep/article/details/127867162

版权

本文介绍了如何在Vue.js应用中利用el-upload组件实现多文件的FormData上传功能。通过在底部确认按钮点击时，将文件添加到formData对象，然后发送请求到后端。同时，文章还提及了后端如何以文件流形式返回结果。

摘要由CSDN通过智能技术生成

最开始单个文件上传没用到element el-upload 组件
在这里插入图片描述
部分如下

    <el-dialog
      :title="showTitle"
      :visible="orderServiceShowDialog"
      top="8vh"
      @close="handleClose"
      @click.native="clickDialog"
      :before-close="beforeClose"
    >
      <el-form
        ref="orderService"
        :model="orderService"
        :rules="orderServiceRules"
        label-width="140px"
        style="width: 94%; margin-left: 10px"
      >
          <el-form-item label="工单分类:" prop="primaryClassification">
            <el-input
              :value="orderService.primaryClassification"
              style="width: 100%"
              placeholder="请选择工单分类"
              @click.native.stop="getcheckPrimaryAndSecondary"
            />
            <div v-if="ShowTree" class="tree-box">
              <el-tree
                v-loading="loading"
                :data="classifyList"
                :props="{ label: 'classifyName' }"
                @node-click="handleNodeClick"
              />
            </div>
          </el-form-item>
          ......
          //省略其他表单内容 只看附件的
            <el-form-item label="工单附件：" prop="file">
              <!-- 上传-->
              <el-button
                size="small"
                @click="$refs.fileRef.click()"
                style="width: 100%"
              >
                <el-button size="mini" style="position: relative; z-index: 1">
                  <i class="el-icon-paperclip"> 上传附件 </i>
                </el-button>
                <input ref="fileRef" type="file" class="file"
                @change="fileChange" enctype=“multipart/form-data” name="file"/>
              </el-button>
      </el-form>
      <template v-slot:footer>
        <el-button style="" type="primary" @click="onSubmit">确定</el-button>
        <el-button @click="handleClose">取消</el-button>
      </template>
 </el-dialog>

data(){
   </