前端上传oss阿里云

首先通过接口拿到后台给的上传权限，等需要的参数：

addfile(file) {
      let filename = ''
      if (this.breadcrumbList.length > 0) {
        this.breadcrumbList.forEach(res => {
          filename  = '/'   res.folder_name
        })
      }
      // console.log(filename)
      this.fileList = [file]
      const formData = new FormData()
      // 注意formData里append添加的键的大小写
      const url = 'flyPic'   filename   '/'   file.name
      formData.append('key', 'flyPic'   filename   '/'   file.name) // 存储在oss的文件路径
      formData.append('OSSAccessKeyId', this.aliyunOssToken.access_key) // accessKeyId
      formData.append('policy', this.aliyunOssToken.policy) // policy
      formData.append('Signature', this.aliyunOssToken.signature) // 签名
      // 如果是base64文件，那么直接把base64字符串转成blob对象进行上传就可以了
      formData.append('file', this.fileList[0])
      formData.append('success_action_status', 200) // 成功后返回的操作码
      this.onImportEmit(formData, file.name, url)
    },

然后做一个最简单的axios请求：

 onImportEmit(formData, filename, url) {
      axios({
        url: this.aliyunOssToken.host,//这里的地址就是oss的地址
        method: 'POST',
        data: formData,
        withCredentials: false,
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }).then(res => {
        // console.log(res)
        if (res.status === 200) {
          // 成功回调
          console.log('上传成功！')
        } else {
          // 失败回调
          console.log('上传失败！')
        }
      }).catch((res) => {
        // 失败回调
          console.log('上传失败！')
      }).finally(() => {
          // 成功失败都会有的回调
          console.log('上传！')
      })
    }

这里提示一点，上传成功之后oss不会返回对应的地址只会返回一个成功或失败的状态，具体看阿里云官网，所以后面添加到数据的地址需要 onImportEmit(formData, filename, url)方法里面的url去做处理。。

这篇好文章是转载于：学新通技术网