vue+iview实现文件上传

下面是详细讲解"vue+iview实现文件上传"的完整攻略：

准备工作

1. 在项目中安装vue和iview

npm install vue iview --save

1. 在main.js中引入vue和iview，并配置相关的组件

import Vue from 'vue'
import iView from 'iview'
import 'iview/dist/styles/iview.css'
import App from './App.vue'

Vue.use(iView)

new Vue({
  el: '#app',
  render: h => h(App),
})

实现文件上传

1. HTML部分

<template>
  <div>
    <i-upload
      :action="uploadUrl"
      :before-upload="beforeUpload"
      :on-success="onUploadSuccess"
    >
      <Button>
        <Icon type="ios-cloud-upload-outline"></Icon>
        选择文件
      </Button>
    </i-upload>
  </div>
</template>

其中，使用了iview提供的i-upload组件，通过:action指定上传文件的API地址，:before-upload指定在上传前的操作，:on-success指定上传成功后的操作。

1. JavaScript部分

<script>
  export default {
    data() {
      return {
        uploadUrl: 'http://your_api_url',
      }
    },
    methods: {
      beforeUpload(file) {
        const isExcel = /xlsx|xls|csv/.test(file.type)
        const isLt2M = file.size / 1024 / 1024 < 2

        if (!isExcel) {
          this.$Message.error('请上传xlsx、xls或csv格式的文件')
          return false
        }

        if (!isLt2M) {
          this.$Message.error('上传文件大小不能超过2MB')
          return false
        }

        return true
      },
      onUploadSuccess(res) {
        if (res.status === 0) {
          this.$Message.success('上传成功')
        } else {
          this.$Message.error('上传失败')
        }
      },
    },
  }
</script>

其中，beforeUpload()函数用于进行上传前的校验，通过正则表达式判断是否是需要上传的文件类型，通过文件大小判断文件是否超过了2MB，返回true则允许上传，返回false则阻止上传。

onUploadSuccess()函数用于在上传完成后进行提示操作。

示例说明

示例一：基本上传

<template>
  <div>
    <i-upload
      :action="uploadUrl"
      :before-upload="beforeUpload"
      :on-success="onUploadSuccess"
    >
      <Button>
        <Icon type="ios-cloud-upload-outline"></Icon>
        选择文件
      </Button>
    </i-upload>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        uploadUrl: 'http://your_api_url',
      }
    },
    methods: {
      beforeUpload(file) {
        const isExcel = /xlsx|xls|csv/.test(file.type)
        const isLt2M = file.size / 1024 / 1024 < 2

        if (!isExcel) {
          this.$Message.error('请上传xlsx、xls或csv格式的文件')
          return false
        }

        if (!isLt2M) {
          this.$Message.error('上传文件大小不能超过2MB')
          return false
        }

        return true
      },
      onUploadSuccess(res) {
        if (res.status === 0) {
          this.$Message.success('上传成功')
        } else {
          this.$Message.error('上传失败')
        }
      },
    },
  }
</script>

这个示例中，实现了一个基本的上传功能，上传文件时进行了校验，并在上传成功或者失败的时候进行了提示。

示例二：添加上传前和上传后的loading效果

<template>
  <div>
    <i-upload
      :action="uploadUrl"
      :before-upload="beforeUpload"
      :on-success="onUploadSuccess"
      :on-error="onUploadError"
      :on-progress="onUploadProgress"
    >
      <Button :loading="uploadLoading">
        <Icon type="ios-cloud-upload-outline"></Icon>
        选择文件
      </Button>
    </i-upload>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        uploadUrl: 'http://your_api_url',
        uploadLoading: false,
      }
    },
    methods: {
      beforeUpload(file) {
        const isExcel = /xlsx|xls|csv/.test(file.type)
        const isLt2M = file.size / 1024 / 1024 < 2

        if (!isExcel) {
          this.$Message.error('请上传xlsx、xls或csv格式的文件')
          return false
        }

        if (!isLt2M) {
          this.$Message.error('上传文件大小不能超过2MB')
          return false
        }

        this.uploadLoading = true

        return true
      },
      onUploadSuccess(res) {
        this.uploadLoading = false

        if (res.status === 0) {
          this.$Message.success('上传成功')
        } else {
          this.$Message.error('上传失败')
        }
      },
      onUploadError(err) {
        this.uploadLoading = false
        this.$Message.error('上传失败，请重试')
      },
      onUploadProgress(event, file, fileList) {
        console.log('上传进度：', event.percent)
      },
    },
  }
</script>

这个示例中，我们通过控制一个变量uploadLoading来实现上传前和上传后的loading效果。在beforeUpload()函数中，设置uploadLoading为true，表示上传中，上传完成或上传失败时，将其设置为false。此外，在i-upload中添加了另外三个属性：on-error用于处理上传错误，on-progress用于处理上传进度。

通过这个示例，我们可以很清晰地看出，通过控制loading效果，对用户友好性的提升是显著的。