返回

IView上传控件upload之不通过action地址自动上传,而改为点击上传按钮实现手动上传

前端

  1. 引入IView上传控件upload
    首先,你需要在你的项目中引入IView上传控件upload。
npm install iview --save

然后,在你的代码中引入upload组件:

import { Upload } from 'iview';

2. 在表单中添加upload组件

在你的表单中添加upload组件,并设置必要的属性。

<Upload
  v-model="fileList"
  :action="uploadUrl"
  :headers="headers"
  :name="name"
  :multiple="multiple"
  :data="data"
  :withCredentials="withCredentials"
  :show-upload-list="showUploadList"
  :drag="drag"
  @on-remove="handleRemove"
  @on-success="handleSuccess"
  @on-error="handleError"
>
  <Button type="primary">上传</Button>
</Upload>

3. 自定义上传按钮

然后,你需要自定义一个上传按钮,并添加点击事件监听器。

<template>
  <div>
    <Upload
      ref="upload"
      v-model="fileList"
      :action="uploadUrl"
      :headers="headers"
      :name="name"
      :multiple="multiple"
      :data="data"
      :withCredentials="withCredentials"
      :show-upload-list="showUploadList"
      :drag="drag"
      @on-remove="handleRemove"
      @on-success="handleSuccess"
      @on-error="handleError"
    >
      <Button type="primary" @click="uploadFile">上传</Button>
    </Upload>
  </div>
</template>

<script>
export default {
  methods: {
    uploadFile() {
      this.$refs.upload.submit();
    }
  }
};
</script>

4. 实现手动上传

最后,你需要在点击上传按钮时,手动调用submit()方法。

uploadFile() {
  this.$refs.upload.submit();
}

这样,你就可以在IView上传控件upload中实现手动上传了。

总结

以上就是在IView上传控件upload中实现手动上传的步骤。希望本文对您有所帮助。