1.引入oss包
安装依赖包 : npm install ali-oss
import OSS from 'ali-oss';
import SparkMD5 from 'spark-md5'
2.oss基础配置
Vue.prototype.$oss=new OSS({
// yourRegion填写Bucket所在地域。以华东1(杭州)为例,Region填写为oss-cn-hangzhou。
region: 'oss-cn-hangzhou',
// 从STS服务获取的临时访问密钥(AccessKey ID和AccessKey Secret)。
accessKeyId: '12345678',
accessKeySecret: 'abcdefg',
// 从STS服务获取的安全令牌(SecurityToken)。
// stsToken: 'yourSecurityToken',
// 填写Bucket名称。
bucket: 'alibi'
});
//编译上传文件名工具
Vue.prototype.$sparkMD5 = new SparkMD5.ArrayBuffer();
3.上传html
1. 上传h5
<el-upload ref="uploadimg" action="" :auto-upload="false" :http-request="ossupload" :on-change="handleChange"></el-upload>
2.上传接口和上传前的文件信息处理js
//上传接口调用
async ossupload() {
let obj = "/tvdsp/webupload/" + this.filename;
await this.$oss.put(obj, this.file).then((r1) => {
console.log(r1);
this.form.license = r1.url;
})
.catch(function(err) {
this.$message.error(err);
});
},
//上传前的数据异步加密处理
//该函数处理有个bug问题就是上传前和成功该函数都会被调用一遍
handleChange(file) {
return new Promise((resolve) => {
let reader = new FileReader();
reader.onload = (event) => {
//md5加密文件名
let spark = this.$sparkMD5.append(event.target.result);
let md5 = spark.end();
let imgtype = file.name.substr(file.name.lastIndexOf("."));
//文件名规范
this.filename = md5 + imgtype;
//手动调用上传接口,因为异步处理,无法调用element框架的before-upload函数处理
this.$refs.uploadimg.submit();
};
reader.readAsDataURL(file.raw);
});
},
3. 返回结果:
4. 遇到的几个问题:
1. 跨域问题
解决办法:阿里云oss设置跨域访问
OSS 提供 HTML5 协议中的跨域资源共享 CORS 设置,帮助您实现跨域访问。当 OSS 收到一个跨域请求(或者 OPTIONS 请求)时,会读取存储空间对应的 CORS 规则,然后进行相应的权限检查。OSS 会依次检查每一条规则,使用第一条匹配的规则来允许请求并返回对应的 header。如果所有规则都匹配失败,则不附加任何 CORS 相关的 header。
-
进入 OSS 管理控制台 界面。
-
在左侧存储空间列表中,单击目标存储空间名称,打开该存储空间概览页面。
-
单击 基础设置 页签,找到 跨域设置 区域,然后单击 设置。
-
单击 创建规则,打开 设定跨域规则 对话框。
-
设置跨域规则。
-
来源:指定允许的跨域请求的来源。允许多条匹配规则,以回车为间隔。每个匹配规则允许使用最多一个“*”通配符。
-
允许 Methods:指定允许的跨域请求方法。
-
允许 Headers:指定允许的跨域请求 header。允许多条匹配规则,以回车为间隔。每个匹配规则使用最多一个“*”通配符。
-
暴露 Headers:指定允许用户从应用程序中访问的响应头(例如一个 Javascript 的 XMLHttpRequest 对象)。
-
缓存时间:指定浏览器对特定资源的预取(OPTIONS)请求返回结果的缓存时间。
说明: 每个存储空间最多可以配置 10 条规则。
-
单击 确定。
2. InvalidPartError400报错
解决办法:阿里云oss设置跨域访问时给暴露 Headers添加Etag
3. RequestError: XHR error (req "error"), POST xxx.xxx/uploa......…
解决办法:在配置中加入secure:true
var client = new OSS.Wrapper({
region : 'oss-cn-hanghzou',
secure:true,//*这句话很重要!!!!!!!!!
accessKeyId : 'xxx',
accessKeySecret : 'xxx',
bucket : 'xxx'
});