vue iview upload 本地上传自定义action上传地址

最新推荐文章于 2023-04-27 17:28:52 发布

原创最新推荐文章于 2023-04-27 17:28:52 发布 · 1.8k 阅读

0 ·

CC 4.0 BY-SA版权

vuejs2.0 专栏收录该内容

27 篇文章

订阅专栏

本文介绍如何在Vue项目中使用IView的Upload组件，重点讲解如何设置自定义的action属性，实现本地文件上传到指定服务器地址的方法。

注意：action="#"

<FormItem style="margin-top:25px" label="输入参数" prop="attachment">
  <Upload
    style="width:70%"
    action="#"
    v-model="formData.attachment"
    :format="['csv']"
    :default-file-list="uploadList"
    :before-upload="handleBeforeUpload"
    :on-remove="removeFile"
    :on-format-error="handleFormatError"
  >
    <Button type="primary" icon="ios-cloud-upload-outline">上传文件</Button>
    <p>支持扩展名.csv</p>
  </Upload>
</FormItem>

uploadList: [],

handleBeforeUpload (file) {   //上传前钩子
  let size = file.size / 1024 / 1024
  let type = file.name
  if(type.includes('.csv') || type.includes('.CSV') ){
    if(size <= 10){
      this.formData.attachment = file
      this.uploadList = [{    //用于表单的已上传文件显示
        'name': file.name,
        'url': '',
        'size': file.size
      }]
      return false;
    }else{
      this.$Message.error('只支持10M以内大小的文件,请重新上传');
      return false
    }
  }else{
    this.$Message.error('只支持.csv文件类型,请重新上传');
    return false
  }           
},
removeFile(file, fileList){   //移除已上传文件;
  this.formData.attachment = ''
  this.uploadList = []
},
handleFormatError (file) {
  this.$Notice.warning({
    title: '文件类型',
    desc: '文件类型错误,请选择.csv'
  });
},