下面是“Vue Element UI + OSS实现上传文件功能”的完整攻略。
准备工作
1.安装Vue CLI并创建Vue项目。
2.引入Element UI和Aliyun OSS SDK。
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Vue Element UI + OSS实现上传文件功能</title>
</head>
<body>
<div id="app"></div>
<!-- 引入Element UI -->
<link rel="stylesheet" href="//unpkg.com/element-ui/lib/theme-chalk/index.css">
</body>
<script src="/static/js/oss-sdk.js"></script>
<script src="//cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<script src="//unpkg.com/element-ui/lib/index.js"></script>
<script src="./app.js"></script>
</html>
3.编写初始化OSS控制台信息的方法。
// app.js
const OSS = require('ali-oss').Wrapper;
Vue.prototype.$osssts = {
region: '',
accessKeyId: '',
accessKeySecret: '',
bucket: '',
stsToken: '',
expiration: '',
};
Vue.prototype.$ossClient = {};
Vue.prototype.$initOss = function () {
let self = this;
this.$http.get('/api/sts').then(response => {
if (response.status === 200 && response.data.Code === 'Success') {
let data = response.data;
self.$osssts.accessKeyId = data.AccessKeyId;
self.$osssts.accessKeySecret = data.AccessKeySecret;
self.$osssts.securityToken = data.SecurityToken;
self.$osssts.expiration = data.Expiration;
self.$osssts.region = self.$configStore.get('oss.region');
self.$osssts.bucket = self.$configStore.get('oss.bucket');
self.$ossClient = new OSS({
region: self.$osssts.region,
accessKeyId: self.$osssts.accessKeyId,
accessKeySecret: self.$osssts.accessKeySecret,
stsToken: self.$osssts.securityToken,
bucket: self.$osssts.bucket
});
}
})
}
Element-Ui Upload 组件的使用
Element-Ui提供了Upload组件，可以非常方便地实现文件上传功能。
使用vue-cli安装 Element UI
npm install element-ui --save
引入Upload组件
<!--index.html-->
<div id="app">
<el-upload
class="upload-demo"
action="//jsonplaceholder.typicode.com/posts/"
:on-preview="handlePreview"
:on-remove="handleRemove"
:on-success="handleSuccess"
:on-error="handleError"
:before-upload="beforeUpload">
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
</div>
配置actions
action属性是上传的接收地址，这里我们需要将其配置到OSS上。
<!--index.html-->
<template>
<div id="app">
<el-upload
class="upload-demo"
:action="$ossClient.signatureUrl('test/image')"
:on-success="handleSuccess"
>
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件...</div>
</el-upload>
</div>
</template>
调用OSS相关API实现上传功能
上传文件
// app.js
Vue.prototype.$uploadOss = function (file, options = {}) {
let ext = file.name.substr(file.name.lastIndexOf('.'));
let storeName = options.storeName || Date.now().toString() + ext;
return Promise.all([
this.$ossClient.put(storeName, file),
Promise.resolve(storeName),
this.$configStore.get('oss.url') + '/' + storeName,
]);
};
删除文件
// app.js
Vue.prototype.$removeOss = function (key) {
return this.$ossClient.delete(key);
};
完整示例
<!--index.html-->
<template>
<div id="app">
<el-upload
class="upload-demo"
:action="$ossClient.signatureUrl('test/image')"
:on-success="handleSuccess"
>
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件...</div>
</el-upload>
<el-table
style="width: 100%;"
:data="fileList"
border
v-loading="loading"
:default-sort="sortObj"
height="500"
@sort-change="handleSortChange">
<el-table-column fixed="left" label="文件名" width="200">
<template slot-scope="{ row }">
<a :href="$configStore.get('oss.url')+'/'+row.storeName">{{row.storeName}}</a>
</template>
</el-table-column>
<el-table-column fixed="left" prop="fileSize" label="文件大小" width="100">
<template slot-scope="{ row }">
{{(row.fileSize/1024).toFixed(2)}} K
</template>
</el-table-column>
<el-table-column prop="lastModified" label="上传时间" width="150" sortable>
<template slot-scope="{ row }">
{{ dateFormat(row.lastModified) }}
</template>
</el-table-column>
<el-table-column label="操作" width="150" fixed="right">
<template scope="scope">
<el-button type="danger" size="mini" :loading="scope.row.loading" @click="removeFile(scope.row, scope.$index)">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
loading: false,
fileList: [],
sortObj: {
prop: 'lastModified',
order: 'descending'
}
}
},
created () {
this.$initOss();
this.getFileList();
},
computed: {
$fileStore () {
return this.$store.state.files;
}
},
methods: {
handleSuccess (response, file, fileList) {
if (response.res.status === 200) {
let file = {
storeName: response.name,
fileSize: file.size,
fileExtension: file.name.replace(/.*\./, ''),
lastModified: Date.now()
};
this.addFile(file);
} else {
this.$message.error('上传失败！');
}
},
addFile (file) {
this.$fileStore.addFile(file).then(data => {
this.getFileList();
});
},
getFileList () {
this.loading = true;
let self = this;
this.$fileStore.getFileList().then(data => {
self.fileList = data;
self.loading = false;
});
},
removeFile (file, index) {
this.$fileStore.removeFile(file).then(() => {
this.fileList.splice(index, 1);
});
},
dateFormat (timestamp) {
let date = new Date(timestamp);
let year = date.getFullYear();
let month = date.getMonth() + 1;
let day = date.getDate();
let hours = date.getHours();
let minute = date.getMinutes();
let second = date.getSeconds();
return `${year}-${month}-${day} ${hours}:${minute}:${second}`;
},
handleSortChange ({ prop, order }) {
this.fileList.sort((a, b) => {
let valueA = a[prop];
let valueB = b[prop];
if (order === 'descending') {
return valueB - valueA;
} else {
return valueA - valueB;
}
})
}
}
}
</script>
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Vue Element UI + OSS实现上传文件功能 - Python技术站
微信扫一扫 
支付宝扫一扫 