iview Upload上传

最新推荐文章于 2023-12-18 23:26:40 发布

原创最新推荐文章于 2023-12-18 23:26:40 发布 · 7.5k 阅读

4 ·

CC 4.0 BY-SA版权

本文介绍了一个文件上传组件的实现方式，包括如何选择文件格式、上传文件到服务器并获取查看链接等关键步骤。此外还详细解释了组件中各种事件钩子的功能。

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

<FormItem label="脚本上传">
   <Upload
       class="uploadButton"
       ref="uploadButton"
       :on-success="handleUploadSuccess"
       :format="uploadFormat"
       :on-format-error="handleFormatError"
       :before-upload="handleClearFiles"
       action="http://file.cs/upload/files">                                                            
       <Button>Upload</Button>
   </Upload>
   <a class="exportBtn" v-if="this.modal.type === 'update'" v-bind:href="formItem.kafkaPsUrl">查看文件</a>
</FormItem>

methods () {
    handleChangeKafkaPsType (value) {    // 确定上传文件格式format
      if (value === 'python') {
        this.uploadFormat = ['py']
      } else if (value === 'sh') {
        this.uploadFormat = ['sh']
      } else {
        this.uploadFormat = ['js']
      }
    },
    handleUploadSuccess (res, file) {
        this.formItem.kafkaPsUrl = res.data.url
    },
    handleClearFiles () {   // 再次点击上传之前，清空之前已上传文件
      this.$refs.uploadButton.clearFiles()
    },
    handleFormatError (file) {
      this.$Message.warning({
        content: file.name + '文件类型不正确, 请选择' + this.uploadFormat.join(' or') + '类型',
        duration: 5
      })
    }
}

选择文件上传，上传到相应的服务器上，并返回查看该文件的url.

before-upload:上传文件之前，清空已上传文件，避免上传多个文件。

on-success	文件上传成功时的钩子，返回字段为 response, file, fileList
on-format-error	文件格式验证失败时的钩子，返回字段为file, fileList
before-upload	上传文件之前的钩子，参数为上传的文件，若返回 false 或者 Promise 则停止上传