阿里官方文档
1、安装依赖
cnpm install ali-oss --save
2、新建oss.js文件,进行封装
const OSS = require('ali-oss')
import { getOssInfo } from '@/api/oss';//获取oss上传的相关密钥接口
export default {
/**
* 阿里云oss sdk文件上传
dir 上传到的文件位置
* @param {*} file 文件流
* @param {*} successCallback 成功回调
* @param {*} errCallBack 失败回调
* @param {*} bucketName 阿里云桶名(可以指定多个桶名)
* @param {*} dir 上传文件夹路径 譬如images
*/
bucketUpload(file, successCallback = new Function(), errCallBack = new Function(), bucketName = 'jpjmall', dir = 'image') {
let fileName = file.name// 先获取上传要的资料签名
getOssInfo({token:sessionStorage.getItem('token')}).then((res) => {
if (res.status === 200) {
let obj = res.data || {}
let config = {}
config.host = obj.OssUrl
// 实例化一个上传客户端
const client = new OSS({
// yourRegion填写Bucket所在地域。Region填写为oss-cn-hangzhou。
region: 'oss-cn-beijing',
// 从STS服务获取的临时访问密钥(AccessKey ID和AccessKey Secret)。)(后台接口返回)
accessKeyId: obj.AccessKeyId,
accessKeySecret: obj.AccessKeySecret,
// 从STS服务获取的安全令牌(SecurityToken)。
stsToken: obj.SecurityToken,
// 填写Bucket名称。
bucket: bucketName,
endpoint: "https://oss-cn-beijing.aliyuncs.com"
})
try {// 为保证唯一性,可以通过uuid将文件名替换
// let uuid = uuidv4() + fileName.substring(fileName.lastIndexOf('.'))if (dir.substring(dir.length - 1, 1) !== '/')
{
dir += '/'
}
const result = client.put(dir + fileName, file)
result
.then(res => {
console.log(res, "返回文件名和文件地址")
let size = file.size > 1000000 ? parseFloat(file.size / 1024 / 1024).toFixed(2) + 'M' : parseFloat(file.size / 1024).toFixed(2) + 'KB'
successCallback({
attachment: fileName,
aliyunAddress: res.url,
size: size,
host: config.host
})
})
.catch(err => {
errCallBack(err)
})
} catch (e) {
console.log(e)
}
} else {
// _this.$message.warning(res.msg);
}
});
}
}
3、vue页面调用
import ossUpload from '@/utils/oss'
<el-form-item label="上传pdf">
<el-upload
class="upload-demo"
:file-list="fileList"
action=""
:http-request="handleUpload"
:on-success="handleZipSuccess"
accept=".pdf"
>
<el-button size="small" type="primary">点击上传</el-button>
<span slot="tip" class="el-upload__tip">
支持扩展名:.pdf
</span>
</el-upload>
</el-form-item>
//手动上传的方法
handleUpload(op) {
let bucketName = 'jpjmall'; // 桶名
let dir = `doc`;
ossUpload.bucketUpload(
op.file,
(res) => {
// console.log('成功回调:',res)
let temp = {
name: res.attachment,
url: res.aliyunAddress
};
this.host = res.host;
op.onSuccess(temp);
},
(err) => {
console.log(err);
},
bucketName,
dir
);
},
//上传成功的方法
handleZipSuccess(file) {
this.fileList = [];
this.fileList.push({
fileName: file.name,
name: file.name
});
// console.log(file, '阿里云返回的文件地址和文件名称');
this.form.fileAddressId = file.url;
this.form.handoutName = file.name;
this.form.handoutType = file.name.replace(/.+\./, '');
},
4、上传成功后预览
<a :href="上传后的具体地址" target="_blank">pdf</a>