Vue2.0利用vue-resource上传文件到七牛的实例代码

下面是利用Vue2.0和vue-resource上传文件到七牛的实例代码的完整攻略。

安装vue-resource

首先，我们需要安装vue-resource。你可以在项目根目录运行以下命令安装：

npm install vue-resource --save

配置七牛

首先，你需要在七牛上创建一个存储空间，然后配置访问密钥和域名。你可以在 七牛开发者中心 中找到这些信息。

HTML部分

在HTML部分，你需要添加一个input元素，用于选择文件：

<input type="file" ref="uploadInput" @change="handleUpload">

并且你还需要添加一个button元素，用于上传文件：

<button type="button" @click="upload">上传</button>

Vue组件部分

首先，你需要在Vue组件的data中添加七牛的设置信息：

data () {
  return {
    qiniu: {
      url: 'https://upload.qiniup.com', // 七牛上传地址
      bucket: 'my-bucket-name', // 空间名
      AK: 'my-access-key', // AK
      SK: 'my-secret-key', // SK
      domain: 'http://example.com/' // 域名
    }
  }
}

然后，你需要实现一个方法，用于获取token：

getQiniuToken () {
  const url = 'your-token-api-url'
  // 通过axios获取token
  return axios.get(url)
  .then(res => {
    return res.data.token // 这里返回的是你从token接口返回的token字段
  })
}

接着，你需要实现一个方法，用于处理上传的文件：

handleUpload () {
  this.file = this.$refs.uploadInput.files[0]
},

然后，你需要实现上传方法：

upload () {
  const file = this.file
  if (!file) {
    this.$message.error('请选择图片')
    return
  }
  // 获取token
  this.getQiniuToken().then(token => {
    const formData = new FormData()
    formData.append('file', file)
    formData.append('token', token)
    // 文件上传
    this.$http.post(this.qiniu.url, formData, {
      headers: {'Content-Type': 'multipart/form-data'}
    }).then(response => {
      console.log('上传成功:', response.body)
      this.imageUrl = this.qiniu.domain + response.body.hash
    }, response => {
      console.log('上传失败:', response.message)
    })
  }, error => {
    console.log('获取Token失败:', error)
  })
}

示例

下面是两个基于该代码的示例：

示例1

该示例显示了如何在一个Vue组件中上传文件：

<template>
  <div>
    <input type="file" ref="uploadInput" @change="handleUpload">
    <button type="button" @click="upload">上传</button>
    <div>
      <img :src="imageUrl" alt="">
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data () {
    return {
      imageUrl: '',
      file: null,
      qiniu: {
        url: 'https://upload.qiniup.com', // 七牛上传地址
        bucket: 'my-bucket-name', // 空间名
        AK: 'my-access-key', // AK
        SK: 'my-secret-key', // SK
        domain: 'http://example.com/' // 域名
      }
    }
  },
  methods: {
    getQiniuToken () {
      const url = 'your-token-api-url'
      // 通过axios获取token
      return axios.get(url)
      .then(res => {
        return res.data.token // 这里返回的是你从token接口返回的token字段
      })
    },
    handleUpload () {
      this.file = this.$refs.uploadInput.files[0]
    },
    upload () {
      const file = this.file
      if (!file) {
        this.$message.error('请选择图片')
        return
      }
      // 获取token
      this.getQiniuToken().then(token => {
        const formData = new FormData()
        formData.append('file', file)
        formData.append('token', token)
        // 文件上传
        this.$http.post(this.qiniu.url, formData, {
          headers: {'Content-Type': 'multipart/form-data'}
        }).then(response => {
          console.log('上传成功:', response.body)
          this.imageUrl = this.qiniu.domain + response.body.hash
        }, response => {
          console.log('上传失败:', response.message)
        })
      }, error => {
        console.log('获取Token失败:', error)
      })
    }
  }
}
</script>

示例2

该示例显示了如何在一个原生JavaScript中使用该代码上传文件：

<template>
  <div>
    <input type="file" ref="uploadInput" @change="handleUpload">
    <button type="button" @click="upload">上传</button>
    <div>
      <img :src="imageUrl" alt="">
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data () {
    return {
      imageUrl: '',
      file: null,
      qiniu: {
        url: 'https://upload.qiniup.com', // 七牛上传地址
        bucket: 'my-bucket-name', // 空间名
        AK: 'my-access-key', // AK
        SK: 'my-secret-key', // SK
        domain: 'http://example.com/' // 域名
      }
    }
  },
  methods: {
    getQiniuToken () {
      const url = 'your-token-api-url'
      // 通过axios获取token
      return axios.get(url)
      .then(res => {
        return res.data.token // 这里返回的是你从token接口返回的token字段
      })
    },
    handleUpload () {
      this.file = this.$refs.uploadInput.files[0]
    },
    upload () {
      const file = this.file
      if (!file) {
        alert('请选择图片')
        return
      }
      // 获取token
      this.getQiniuToken().then(token => {
        const formData = new FormData()
        formData.append('file', file)
        formData.append('token', token)
        // 文件上传
        const xhr = new XMLHttpRequest()
        xhr.open('POST', this.qiniu.url, true)
        xhr.setRequestHeader('Content-Type', 'multipart/form-data')
        xhr.upload.onprogress = (event) => {
          if (event.lengthComputable) {
            const percent = Math.round((event.loaded / event.total) * 100)
            console.log(上传进度：${percent}%)
          }
        }
        xhr.onreadystatechange = () => {
          if (xhr.readyState === 4) {
            if (xhr.status === 200) {
              const result = JSON.parse(xhr.responseText)
              console.log('上传成功:', result)
              this.imageUrl = this.qiniu.domain + result.hash
            } else {
              console.log('上传失败: ', xhr.statusText)
            }
          }
        }
        xhr.send(formData)
      }, error => {
        console.log('获取Token失败:', error)
      })
    }
  }
}
</script>