oss上传封装及使用例子

main
JING 8 months ago
parent 5b5b440614
commit 872846b9f7
  1. 40
      config/api.js
  2. 2
      config/com.js
  3. 11
      config/request.js
  4. 15
      config/user.js
  5. 3
      pages/user/account/index.vue

@ -37,7 +37,7 @@ var api = {
* @param function catchFun catch回调
*/
ossUpload:function(fileBaseUrl,scene,data,thenFun,catchFun){
ossUpload:function(fileBaseUrl,scene,data,ossthenFun,osscatchFun){
//从http://tmp/IX45zGr8kI1Tb1fd2c2b3045e9bfce734869d2024805.png 中
//提取 IX45zGr8kI1Tb1fd2c2b3045e9bfce734869d2024805.png 文件名
var fileNameArr = fileBaseUrl.split('//tmp/');
@ -57,15 +57,21 @@ var api = {
var ossConfig = res;
data.ossConfig = ossConfig;
api.upload(ossConfig.host,data,function(rs){
var file_url = ossConfig.dir ? ossConfig.dir + (fileName ? '/' + fileName : '') : ossConfig.key;
file_url = `/${file_url}`;
//console.log(file_url);
rs.data.file_url = file_url;
console.log('上传成功',rs);
if(thenFun) thenFun(rs);
if(ossthenFun) ossthenFun(rs);
},function(er){
console.log('上传失败',er);
if(catchFun) catchFun(er);
if(osscatchFun) osscatchFun(er);
});
},function(err){
console.log('签名失败',err);
if(catchFun) catchFun(err);
if(osscatchFun) osscatchFun(err);
});
},
@ -133,14 +139,18 @@ var api = {
upload:function(urlName, data, thenFun,catchFun){
var newData = data;
var formData = {};
console.log('判断是否存在',data.hasOwnProperty('ossConfig'))
if(data.hasOwnProperty('ossConfig'))
{
var ossConfig = data.ossConfig;
var fileNameOss = ossConfig.fileName;
var key = ossConfig.dir ? ossConfig.dir + (fileNameOss ? '/' + fileNameOss : '') : ossConfig.key;
var newFormData ={
key: data.ossConfig.key,
OSSAccessKeyId: data.ossConfig.accessId,
policy: data.ossConfig.policy, // 输入你获取的的policy
key: key,
OSSAccessKeyId: ossConfig.accessId,
policy: ossConfig.policy, // 输入你获取的的policy
success_action_status: '200', // 让服务端返回200,不然,默认会返回204
signature: data.ossConfig.signature, // 输入你获取的的signature
signature: ossConfig.signature, // 输入你获取的的signature
};
formData = newFormData;
}
@ -153,7 +163,7 @@ var api = {
filePath: newData.filePath, // 要上传文件资源的路径。
// 注:如果局部custom与全局custom有同名属性,则后面的属性会覆盖前面的属性,相当于Object.assign(全局,局部)
custom: {auth:true,toast:true,}, // 可以加一些自定义参数,在拦截器等地方使用。比如这里我加了一个auth,可在拦截器里拿到,如果true就传token
name: 'files', // 文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
name: 'file', // 文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
// #ifdef H5 || APP-PLUS
timeout: 60000, // H5(HBuilderX 2.9.9+)、APP(HBuilderX 2.9.9+)
// #endif
@ -163,6 +173,7 @@ var api = {
formData: formData, // HTTP 请求中其他额外的 form data
// 返回当前请求的task, options。请勿在此处修改options。非必填
getTask: (task, options) => {
console.log(options);
task.onProgressUpdate((res) => {
console.log('上传进度' + res.progress);
console.log('已经上传的数据长度' + res.totalBytesSent);
@ -170,8 +181,11 @@ var api = {
});
},
}).then(res => {
console.log('upload then success !!!',res);
if(thenFun) thenFun(res);
}).catch((rs) =>{
console.log('upload catch err !!!',rs);
if(catchFun) catchFun(rs);
});
},
@ -259,5 +273,13 @@ var api = {
env:function(){
return ENV.EnvShow;
},
/**
* oss 地址
*
*/
ossurl(url){
const app_config = uni.getStorageSync('app_config');
return app_config.public_url + url;
},
}
module.exports = api;

@ -261,7 +261,7 @@ var com = {
}
return item
})
}
},
}

@ -63,8 +63,17 @@ module.exports = (vm) => {
// 响应拦截
uni.$u.http.interceptors.response.use((response) => { /* 对响应成功做点什么 可使用async await 做异步操作*/
console.log('请求返回',response);
//这里只针对阿里云oss上传没有返回值的时候做个处理
if(response.header.Server == "AliyunOSS" && response.errMsg == "uploadFile:ok" && uni.$u.test.isEmpty(response.data))
{
return {
code:200,
msg:"上传OSS成功",
data:{},
};
}
const data = response.data
//console.log('请求返回',data);
// 自定义参数
const custom = response.config?.custom
if (data.code !== 200) {

@ -68,21 +68,6 @@ var user = {
}
},
getUserInfo: function() {
var res = uni.getStorageSync('token');
if (typeof(res) == 'undefined' || res == '') {
return false;
} else {
var userInfo = {};
userInfo.nickName = uni.getStorageSync('nickName');
userInfo.phone = uni.getStorageSync('phone');
userInfo.userId = uni.getStorageSync('userId');
userInfo.token = uni.getStorageSync('token');
userInfo.avatar = uni.getStorageSync('avatar');
userInfo.realName = uni.getStorageSync('realName');
return userInfo;
}
}
}
module.exports = user

@ -170,6 +170,9 @@
var upData = {filePath:edetail,fileType:'image'};
_this.$api.ossUpload(edetail,'user_small',upData,function(res){
console.log('ossUpload success',res);
var d = res.data;
_this.info.avatar = d.file_url;
_this.uploadImg = [{url:_this.$api.ossurl(d.file_url)}];;
},function(err){
console.log('ossUpload fail',err);
});

Loading…
Cancel
Save