我正在使用Element UI的上传组件.不幸的是,一旦上传文件,它就会触发POST请求.我的目标是把文件推到一个空数组中,然后用按钮发布.

HTML

// Element UI documentation says http-request overrides xhr behavior
// so I can use my own file request. In this case, I wanted to use a method
// though I'm not quite sure about this part?
<el-upload
     action="",
     :http-request="addAttachment",
     :on-remove="deleteAttachment",
     :file-list="attachments">
     <el-button size="mini" type="primary">Add file</el-button>
</el-upload>

// button that uploads the files here

JS

data() {
     attachments: []
},

methods: {
     addAttachment ( file, fileList ) {
          this.attachments.push( file );
     },

     deleteAttachment () {
          // removes from array
     }
}

推荐答案

显然,你还需要将auto-uploadprops 设置为false.否则,它默认为true,即使您为http-requestprops 指定了一个函数,它也会自动try 上载文件.

就你而言:

<el-upload
  action="",
  :http-request="addAttachment",
  :auto-upload="false"
  :on-remove="deleteAttachment",
  :file-list="attachments"
>
  <el-button size="mini" type="primary">Add file</el-button>
</el-upload>

Here's the documentation for the component.

Vue.js相关问答推荐

如何向 添加方法和 v-model?

绑定事件在渲染函数中不起作用

使用计算(computed)属性更改视图

vuex 未知动作类型:addTodo

带有 netlify.toml 文件的环境变量

如何对将 DOM 元素附加到 HTML 正文的 Vue 组件进行单元测试?

vue 模板中无法识别 pug 语言

如何在 vue 组件之外访问$apollo?

将props传递给设置时的VueJS 3组合API和TypeScript类型问题:类型上不存在属性 user用户

如何在 Vue.js 中获取完整的当前日期和时间,而无需编写大量 JavaScript 行

Laravel Vue - 如何让 vue 在公共文件夹中查找图像

使用 vee-validate 在 vue js 中进行验证有错误

为什么Vue.js 使用单字标签

Vuejs 2,VUEX,编辑数据时的数据绑定

单击复选框后,V-model 未更新

Nuxt 应用程序在刷新动态路由时返回 404(Tomcat 服务器)

使用 Vue-cli,我在哪里声明我的全局变量?

Vue CLI - 将构建输出组合到单个 html 文件

我应该将所有数据存储在 vuex 状态

何时使用