网上找的elementUI上传图片到阿里云OSS的教程。但上传不成功一直报错。
建了一个oss.js文件。内容如下:
// 引入ali-oss
let OSS = require('ali-oss')
/**
* [accessKeyId] {String}:通过阿里云控制台创建的AccessKey。
* [accessKeySecret] {String}:通过阿里云控制台创建的AccessSecret。
* [bucket] {String}:通过控制台或PutBucket创建的bucket。
* [region] {String}:bucket所在的区域, 默认oss-cn-hangzhou。
*/
let client = new OSS({
region: 'oss-cn-shanghai.aliyuncs.com',
accessKeyId: '我的阿里云主账号AccessKey',
accessKeySecret: '我的阿里云主账号AccessSecret',
bucket: 'zzdly'
});
/**
* 上传文件,大小不能超过5GB
* @param {string} ObjName OSS的储存路径和文件名字
* @param {string} fileUrl 本地文件
* @retruns Promise
*/
export const put = async (ObjName, fileUrl) => {
try {
let result = await client.put(`AAA/${ObjName}`, fileUrl);// AAA为文件夹, ObjName为文件名字,可以只写名字,就直接储存在 bucket 的根路径
console.log(result);
return result
} catch (e) {
console.log(e)
}
};
页面中的代码:
图片上传组件代码
<el-upload
class="avatar-uploader"
action=""
:http-request="upLoad"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload">
<img v-if="imageUrl" :src="imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
页面中js代码:
/**
* 自定义上传方法
*/
upLoad(file){
var objName = 'banner' + `${Date.parse(new Date())}`+'.jpg'; //定义唯一的文件名
// 调用 ali-oss 中的方法
put(`aaaaaa${objName}`, file.file).then(res => {
console.log("上传上传",res)
})
},
handleAvatarSuccess(res, file) {
this.imageUrl = URL.createObjectURL(file.raw);
},
beforeAvatarUpload(file) {
const isJPG = file.type === 'image/jpeg';
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isJPG) {
this.$message.error('上传头像图片只能是 JPG 格式!');
}
if (!isLt2M) {
this.$message.error('上传头像图片大小不能超过 2MB!');
}
return isJPG && isLt2M;
},
求助,求助,求助。求大佬些帮忙看一下
你这个问题解决了吗?是因为啥啊?我遇到了一样的问题
从错误信息来看,你域名拼接有问题