文件上传的记录

文件上传的记录：

最近这段时间经常和上传文件打交道，在此想做个记录。

（1）直接将文件给到后端：

uploadImage() {
            let file = this.$refs.imageEdit.files[0]
            const reader = new FileReader();
            reader.readAsDataURL(file);
            const loading = this.$loading({
                lock: true,
                text: '正在上传，预计需要10秒，请耐心等待',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            reader.onload = (e) => {
            let object = {}
            object.file = file
            var packageFile = new FormData();
            packageFile.append('file',file)
            packageFile.append('type','recommend_pic')
            postFile(packageFile).then((res) => {
                
                if (res) {
                loading.close();
                if (res.status == 200) {
                    this.isImagePreview = true
                    this.rowViewSon.dictValue = res.data.data.id
                    this.rowViewSon.fileVO.link = res.data.data.link
                    this.$message({
                        message: '上传成功',
                        type: 'success'
                    });

                } else {
                    this.$message.error(`${res.data.msg}`);
                }
                }
            })
            
            }
        },

（2）一些大文件的处理：

// 上传zip的时候触发事件
    onFileChange () {
      const file = this.$refs.file.files[0]
      const filePath = window.URL.createObjectURL(file)
      // /^(d{4})-(d{2})-(d{2}) (d{2}):(d{2}):(d{2})$/
      // (0[1-9]|1[0-2])(0[1-9]|[1-2][0-9]|3[0-1])-(20|21|22|23|[0-1]\d)[0-5]\d-([0-5][0-9])-(.*)-[01][.][z|Z][i|I][p|P]
      // var reg = /^(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])\-(20|21|22|23|[0-1]\d)-[0-5]\d-[01][.][z|Z][i|I][p|P]$/
      var reg = /^(0[1-9]|1[0-2])(0[1-9]|[1-2][0-9]|3[0-1])-(20|21|22|23|[0-1]\d)[0-5]\d-([0-5][0-9])-(.*)-[01][.][z|Z][i|I][p|P]$/
      var regExp = new RegExp(reg);
      // console.log(regExp.test("1012-1752-48-B023F00181-0.zip"))
      if(!regExp.test(file.name)){
      　　this.$message.error('文件名称格式不符合要求，类似1012-1752-48-B023F00181-0.zip，请重新选择');
      　　return;
      }
      this.uploadMinIo(file)
      this.$message({
          showClose: true,
          message: '请耐心等待，压缩包越大，时间越长',
          type: 'warning'
      });
    },
    //上传文件
    uploadMinIo1 (fileObj) {
      let vm = this
      // const files = fileObj;
      if (fileObj) {
        let file = fileObj
        //判断是否选择了文件
        if (file == undefined) {
          //未选择
        } else {
          //选择
          //获取文件类型及大小
          const fileName = file.name
          // const mineType = file.type
          const fileSize = file.size
          const a = '/'
          //判断储存桶是否存在
          minioClient.bucketExists('annotation', function(err) {
            if (err) {
              if (err.code == 'NoSuchBucket') return console.log("bucket does not exist.")
              return console.log(err)
            }
            //准备上传
            let reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onloadend = function (e) {//读取完成触发，无论成功或失败
              const dataurl = e.target.result
              //base64转blob
              const blob = vm.toBlob(dataurl)
              //blob转arrayBuffer
              let reader2 = new FileReader()
              reader2.readAsArrayBuffer(blob)
              reader2.onload = function (ex) {
                //定义流
                let bufferStream = new stream.PassThrough();
                //将buffer写入
                bufferStream.end(new Buffer(ex.target.result));
                // console.log(bufferStream)
                // console.log(ex.target.result)
                //上传
                minioClient.putObject('annotation', `archive${a}${fileName}`, bufferStream, fileSize,(err, etag) => {
                  console.log(err, etag) // err should be null
                  var listener = minioClient.listenBucketNotification('annotation', etag, '', ['s3:ObjectCreated:*'])
                  listener.on('notification', function(record) {
                    // For example: 's3:ObjectCreated:Put event occurred (2016-08-23T18:26:07.214Z)'
                    console.log('%s event occurred (%s)', record.eventName, record.eventTime)
                    vm.$message({
                      message: '上传文件成功',
                      type: 'success'
                    })
                    listener.stop()
                  })
                })
              }
            }
          })
        }

      }
    },


    uploadMinIo (fileObj) {
      let file = fileObj
      const fileSize = file.size
      let size = fileSize / 1048576
      // 文件大小小于200m
      if (size<=230) {
        this.uploadMinIo1(fileObj)
      } else if (size > 230) {
        let file = fileObj
        //获取文件类型及大小
        const fileName = file.name
        const a = '/'
        const reader = new FileReader();
        reader.readAsArrayBuffer(file);
        reader.onload = (e) => {
          //定义流
          let bufferStream = new stream.PassThrough();
          //将buffer写入
          bufferStream.end(new Buffer(e.target.result));
          //上传
          minioClient.putObject('annotation', `archive${a}${fileName}`, bufferStream, fileSize,(err, etag) => {
              var listener = minioClient.listenBucketNotification('annotation', etag, '', ['s3:ObjectCreated:*'])
              listener.on('notification', (record) => {
                  listener.stop()
              })
          })
      }
    }
     
      



    },

使用浏览器传大文件的时候，有两种方式，reader.readAsDataURL和reader.readAsArrayBuffer，这两种方式的在使用上的区别是reader.readAsDataURL在读取本地文件的时候对文件的大小是有一定的限制的，超过200m，reader.readAsDataURL的结果就会是空，reader.readAsArrayBuffer在使用的时候算法部门给予的压缩包最大给到了700多m。