ElementUi Upload上传组件调接口时踩坑（FormData传参）

最新推荐文章于 2024-08-01 16:29:24 发布

weixin_34018202

最新推荐文章于 2024-08-01 16:29:24 发布

阅读量1.4w

点赞数 2

文章标签： javascript ui php ViewUI

原文链接：https://juejin.im/post/5b7fe308e51d45578b0a8dc5

版权

本文主要介绍了在使用ElementUi的Upload组件时遇到的问题及其解决方案，特别是如何使用FormData对象正确传递参数。通过自定义Upload上传实现和设置http-request属性，解决了上传接口参数传递的问题。此外，详细讲解了FormData的创建、使用以及与HTML表单的结合，强调了将file类型转换为二进制的关键步骤，旨在帮助开发者理解并避免类似问题。

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

使用自定义Upload上传实现

参数：http-request 意为“覆盖默认的上传行为，可以自定义上传的实现”是个function。

使用Upload组件

因为饿了么提供的几种上传交互都不满足我们的业务，所以我需要自定义交互。先看一下代码里是怎样的。

// main.js里引入并使用
import { Upload } from 'element-ui';
Vue.use(Upload);
复制代码

// xxx.vue
  <template>
    <el-upload
      action="string"           // action是必填项，随便填个内容
      :http-request="uploadImg" // 使用自定义上传实现
      :show-file-list="false"   // 不显示已上传文件列表
      >
    </el-upload>
  </template>
复制代码

下面先显示错误的版本

  // xxx.vue 以下只显示了调接口的指定方法
  <script>
     methods: {
      uploadImg(item) {
        Api.uploadFile({
          data: {
            file: item.file,
            group: 'system'
          }
        })
        .then((data) => {
          console.log(da