在Vue2.0中，利用vue-resource上传文件到七牛云存储是一项常见的需求，尤其是在进行Web应用开发时。本文将详细介绍这一过程，并提供一个实际的示例代码。
我们需要安装必要的依赖。Vue2.0作为JavaScript框架，用于构建用户界面；vue-resource是Vue的一个插件，提供HTTP交互功能，如GET、POST、PUT等；而七牛云存储则提供稳定的文件存储服务，我们需要它的SDK来获取上传所需的token。
1. 安装依赖：
```
npm install vue vue-resource qiniu --save
```
2. 获取七牛云的上传token。在Node.js环境中，我们可以使用七牛的SDK来生成。以下是一个简单的例子：
```javascript
const qiniu = require('qiniu');
const crypto = require('crypto');
const Config = require('qiniu-config'); // 假设这是你的配置文件
exports.token = function*() {
const key = crypto.createHash('md5')
.update(((new Date()) * 1 + Math.floor(Math.random() * 10).toString()))
.digest('hex');
const [ACCESS_KEY, SECRET_KEY, BUCKET] = [Config.accessKey, Config.secretKey, Config.bucket];
qiniu.conf.ACCESS_KEY = ACCESS_KEY;
qiniu.conf.SECRET_KEY = SECRET_KEY;
const upToken = new qiniu.rs.PutPolicy(BUCKET + ":" + key);
try {
const token = upToken.token();
return this.body = {
key: key,
token: token
};
} catch (e) {
// 处理错误
}
};
```
3. 在Vue组件中实现文件上传。下面是一个简单的`upload.vue`组件模板：
```html
<template>
<label class="mo-upload">
<input type="file" :accept="accepts" @change="upload">
<slot></slot>
</label>
</template>
<style lang="scss">
.mo-upload {
display: inline-block;
position: relative;
margin-bottom: 0;
input[type="file"] {
display: none;
}
.mo-upload--label {
display: inline-block;
position: relative;
}
}
</style>
<script>
export default {
name: 'MoUpload',
props: {
accepts: { // 允许的上传类型
type: String,
default: 'image/jpeg,image/jpg,image/png,image/gif'
},
flag: [String, Number], // 当前上传标识,以便于在同一个监听函数中区分不同的上传域
maxSize: { // 文件大小限制
type: Number,
default: Infinity // 默认无限制
}
},
methods: {
upload(e) {
const file = e.target.files[0];
if (!file) return;
if (file.size > this.maxSize) {
alert('文件过大，不能上传');
return;
}
// 获取token
this.$http.get('/api/token').then(response => {
const { key, token } = response.data;
const formData = new FormData();
formData.append('key', key);
formData.append('token', token);
formData.append('file', file);
this.$http.post('http://up.qiniu.com/putb64/-1', formData)
.then(res => {
console.log('文件上传成功', res);
})
.catch(err => {
console.error('文件上传失败', err);
});
}, err => {
console.error('获取token失败', err);
});
}
}
};
</script>
```
在这个组件中，我们监听了`input[type="file"]`的`change`事件，当用户选择文件后，会调用`upload`方法。这个方法首先检查文件大小，如果超过限制则提示用户。接着，通过`$http.get`请求获取七牛的上传token。一旦获取到token，我们将它与文件一起添加到`FormData`对象中，然后通过`$http.post`发送到七牛的上传接口。
4. 配置Vue-Resource。确保在你的Vue应用入口文件中引入并配置vue-resource：
```javascript
import Vue from 'vue';
import VueResource from 'vue-resource';
Vue.use(VueResource);
Vue.http.options.root = 'https://your-api-url.com'; // 替换为你的API基础URL
```
以上就是Vue2.0利用vue-resource上传文件到七牛云的基本步骤。通过这种方式，你可以方便地在Vue应用中实现文件上传功能，同时利用七牛云的稳定服务存储和管理文件。在实际应用中，你可能还需要处理更多细节，例如错误处理、进度显示、多文件上传等。
