Ant Design Vue file upload details

16314725:

Ant design Vue-based file upload (XSLX file)

Upload Upload

template

<a-upload
	name="multipartFile"
	:multiple="false"
	:action="action"
	methods="post"
	@change="uploadFile"
	:file-list="fileList"
	:disabled="disabled"
	:headers="{
    
    
	Authorization: 'Bearer ' + token,
	}"
>
	<a-button><a-icon type="upload"/>
		点击上传
	</a-button>
</a-upload>

Detailed parameters

1. name

name The file parameter name sent to the background string 'file'

2. multiple: (this is determined according to your own business needs) false: not supported true: supported

multiple Whether to support multi-select files, ie10+ support. After opening, hold down ctrl to select multiple files. boolean false

3.action: (that is, the upload interface for back-end development)

Action uploaded URL string|(file) => Promise None

// return 里面写的就是后端开发的上传接口了 参数记得是写在上面的name里面哦
computed:{
    
    
	action () {
    
    
      if (process.env.NODE_ENV === 'development') {
    
    
        return ''
      } else if (process.env.NODE_ENV === 'test') {
    
    
        return ''
      } else if (process.env.NODE_ENV === 'production') {
    
    
        return ''
      } else if (process.env.NODE_ENV === 'dev') {
    
    
        return ''
      }
    }
}

4.methods: (There is nothing to say about this hahaha)

method HTTP method string 'post' of upload request 1.5.0

5.@change: The state when the uploaded file changes (core)

change The status when the uploaded file is changed Function None

methods:{
    
    
   // 上传文件
   uploadFile (info) {
    
    
     console.log('上传文件', info)
     // ant design 框架中此回调会运行三次，上传中、完成、失败都会调用这个函数。
     if (info.event) {
    
    
       // 只判断是完成的时候
       this.importfile(info.file)//  核心函数
     }
     const fileList = [...info.fileList]
     this.fileList= fileList.slice(-1)
     if (info.file.status === 'uploading') {
    
    
       this.$loading.show()
       return
     }
     if (info.file.status === 'done') {
    
    
       // 上传成功 可以在下面写自己也业务逻辑了
       this.$loading.hide()
     }
   },
    //  上传之前回调，判断上传类型
   beforeUploadcl (file) {
    
    
     const flag= file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
     if (!flag) {
    
    
       this.$message.error('请选择xlsx类型文件')
       this.fileList= []
     }
     return flag
   },
   // 核心函数
   importfile (obj) {
    
    
     const that= this
     const reader = new FileReader()
     reader.readAsArrayBuffer(obj.originFileObj) //  需要传blob类型
     reader.onload = function () {
    
    
       const buffer = reader.result
       const bytes = new Uint8Array(buffer)
       const length = bytes.byteLength
       let binary = ''
       for (let i = 0; i < length; i++) {
    
    
         binary += String.fromCharCode(bytes[i])
       }
       const XLSX = require('xlsx') //  引用
       const wb = XLSX.read(binary, {
    
    
         type: 'binary'
       })
       const outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]])
       console.log(outdata) // 此为取到的excel中内容，然后就可以自己改数据，画页面啦~
     }
   },
}

6.fileList: This.fileList corresponding to the above code

fileList The list of uploaded files (controlled) object[] None

7.disabled

disabled Whether to disable boolean false

8: headers (this should be aimed at specific business needs, generally there are very few headersr problems)

headers Set the upload request header, valid object above IE10 None

9. The type of the button is also mentioned by the way hahaha, just go to the icon icon to select the icon you like and put it in the type to add an icon to the button