阿里云OSS图片上传，前端部分
通过NPM安装ali-oss模块：
npm install ali-oss
自定义文件夹创建oss.js文件：
const OSS = require('ali-oss')
export function client(data) {
//后端提供数据
return new OSS({
accessKeyId: data.accessKeyId,
accessKeySecret: data.accessKeySecret,
stsToken: data.securityToken,
region: data.region, // oss地区
bucket: data.bucket
})
}
element-ui 上传组件：
<el-upload
action="OSS上传路径，必填"
list-type="picture-card"
:before-upload="beforeUpload"
:http-request="upLoad"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove">
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
数据定义：
data() {
return {
dialogImageUrl: '',
dialogVisible: false,
dataObj: {}, //存签名信息
}
}
在script标签下导入oss.js，并在methods里写入以下方法：
//导入oss.js文件
import { client } from './../../../tools/oss.js';
//methods
handleRemove(file, fileList) {
console.log(file, fileList);
},
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
/**
* [beforeUpload 上传图片前执行获取秘钥]
* @return {[type]} [description]
*/
beforeUpload() {
return new Promise((resolve, reject) => {
//从后台获取第一步所需的数据
//getOssToken 获取OSS秘钥的接口地址
this.$axios.get(getOssToken, {}).then(response => {
this.dataObj = response.data
resolve(true)
}).catch(err => {
console.log(err)
reject(false)
})
})
},
/**
* [upLoad 自定义上传图片]
* @param {[type]} file [上传值]
* @return {[type]} [description]
*/
upLoad(file) {
const self = this
let files = file.file,
point = files.name.lastIndexOf('.'),
suffix = files.name.substr(point),
fileName = files.name.substr(0, point),
date = Date.parse(new Date()),
fileNames = `${fileName}_${date}${suffix}`;
//fileNames上传文件的名称
//file.file上传文件的内容
client(this.dataObj).multipartUpload(fileNames, file.file).then(result => {
//下面是如果对返回结果再进行处理，根据项目需要
// console.log(result)
self.$message({
message: '上传成功',
type: 'success'
});
}).catch(err => {
self.$message.error('上传失败');
})
}
可能会遇到跨域的问题：
image.png
如遇此问题，表明本地服务器和阿里云跨域，去阿里云配置即可解决。
