原生input文件上传、预览、下载

HTML

      <input type="file"  @change="getFile" />

JS

 async getFile (e) {
      if (!e.target || !e.target.files) {
        return
      }
      for (let i = 0; i < e.target.files.length; i++) {
        let file = e.target.files[i]
        if (!file) {
          break
        }
        if (file.size > 5 * 1024 * 1024) {
          this.$toast.fail('文件大于5M，请重新选择')
          break
        }
        const tempuid = new Date().getTime()
        file.uid = tempuid
        // 赋值
        if (this.fileList) {
          this.fileList[this.fileList.length] = {}
          this.fileList[this.fileList.length - 1].name = file.name
          this.fileList[this.fileList.length - 1].uid = file.uid
        }
        const uploadFiles = await this.upLoaderFile(file)
        for (let j = 0; j < this.fileList.length; j++) {
          if (this.fileList[j].uid === file.uid) {
            this.fileList[j].url = uploadFiles.url
            this.fileList = [].concat(this.fileList)
            break
          }
        }
      }
    },
    upLoaderFile (file) {
      let params = new FormData()
      params.append('file', file)
      const self = this
      return new Promise((resolve, reject) => {
        // this.$axios.post(uploadURL + `/file/upload/aliyunfile`, params, config)
        this.$axios.request({
          method: 'post',
          url: uploadURL + `/file/upload/aliyunfile`,
          data: params,
          headers: {
          },
          onUploadProgress: (progressEvent) => {
          // 获取文件上传进度
            const complete = (progressEvent.loaded / progressEvent.total * 100 | 0)
            // 下面是判定是判定是哪个文件
            for (let k = 0; k < self.fileList.length; k++) {
              if (self.fileList[k].uid === file.uid) {
                self.fileList[k].percent = complete
                self.fileList = [].concat(self.fileList)
                break
              }
            }
          },
          cancelToken: new self.$axios.CancelToken(c => {
           // 将取消上传的方法赋值给变量 取消时直接调用就可以 this.reqs[item.uid]()
          // 此处uid是我用来区分文件的，如果同时只能上传一个文件，使用一个变量即可，不需要数组，
            self.reqs[file.uid] = c
          })
        }).then(res => {
          if (res && res.status === 200 && res.data && res.data.code === 200) {
            let uploadFile = res.data.data ? res.data.data : ''
            uploadFile.uid = file.uid
            resolve(uploadFile)
          } else {
            self.$toast.fail(res.data ? res.data.message ? res.data.message : '网络异常' : '网络异常')
            // 将错误的文件中的uploaderror置为true，用来显示
            if (self.fileList && self.fileList.length > 0) {
              for (let k = 0; k < self.fileList.length; k++) {
                if (self.fileList[k].uid === file.uid) {
                  self.fileList[k].uploadError = true
                  self.fileList = [].concat(self.fileList)
                  break
                }
              }
            }
            reject(res.data)
          }
        }).catch(err => {
          if (self.fileList && self.fileList.length > 0) {
            for (let k = 0; k < self.fileList.length; k++) {
              if (self.fileList[k].uid === file.uid) {
                if (self.$axios.isCancel(err)) {
                // 如果是用户手动取消的，则不是uploadError
                  self.fileList.splice(k, 1)
                } else {
                  self.fileList[k].uploadError = true
                  self.$toast.fail('网络异常')
                  reject(err)
                }
                self.fileList = [].concat(self.fileList)
                break
              }
            }
          }
        })
      })
    },