vue aixos文件两种常用上传方式与两种常用下载方式

1.文件上传的两种方式
①使用组件库中的封装：与其他字段一起上传

<ks-upload :disabled="disabled" :on-success="success" 
:on-remove="remove" :on-change="change" ref="upload" 
:data="uploadContent" name="uploadFile" 
action="http://10.243.141.138:8090/upload" :auto-upload="false" :accept="accept">
</ks-upload>
使用手动上传auto-upload="false"；data为上传时附带的额外参数，为对象类型；
name为上传的文件字段名；点击按钮手动上传时，执行this.$refs.upload.submit()上传。
注意action="http://10.243.141.138:8090/upload"上传的链接要开启跨域

②根据需求上传：
比如在上传图片之前，需求要求判断上传图片的大小以及限制了图片上传的形式

<ks-upload action="" :on-change="uploadPicture" :auto-upload="false">
在事件中判断图片大小并进进一步操作，注意ks-load也提供了headers字段可以配置请求头
uploadPicture (file, fileList) {
      const fileSize = file.size / 1024 / 1024
      if (fileSize > 10) {
        this.$message.error('请上传体积小于10MB的图片')
        this.fileList = []
        return false
      }
      const fd = new FormData()
      fd.append('file', file.raw)
      this.axios
        .post('/api/upload', fd, {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        })
        .then((response) => {
          this.isOriginal = 1
          this.form.path = response
          // 图片会自动加载出来，所以不需要filelist[]
        }).catch(() => {
          // 未上传成功的话清除图片
          this.fileList = []
        })
    }

2.文件下载的两种方式
①二进制流

async onGetExecl () {
      const id = await this.getListAll(2)
      if (!id) {
        this.select.busiTypeIds = this.select.busiTypeIds.join(',')
        const data = await this.axios.get('/api/online-messages/export', {
          params: this.select,
          // 控制返回类型为blob 不然为乱码
          responseType: 'blob'
        })
        console.log('data', data)
        const blob = new Blob([data], {
          type: 'application/vnd.ms-excel'//execl  msword为下载word
        })
        const url = window.URL.createObjectURL(blob)
        const a = document.createElement('a')
        const _fileName = '文件数据.xls'
        a.download = _fileName
        a.href = url
        document.body.appendChild(a)
        a.click()
        document.body.removeChild(a)
        console.log(this.select.busiTypeIds)
        this.select.busiTypeIds = []
      } else {
        this.$message.error('不存在符合条件的数据')
      }
    }

②base64

async downText(fileId){
      const data=await this.axios.post('/report/basic.downLoadFile',{fileId})
      if(this.type==='execl'){
        this.tip='application/msexecl'
      }
      const file=`data:${this.tip};base64,` + data.CONTENT  //主要就是这一句
      const a = document.createElement('a')
      const _fileName = data.FILE_NAME
      a.download = _fileName
      a.href = file
      document.body.appendChild(a)
      a.click()
      document.body.removeChild(a)
    },

base64转化成blob以及IE的兼容性问题见：
https://blog.csdn.net/xxxxhcy/article/details/113343401