upload上传组件上传本地图片至阿里云oss
项目中要求图片管理使用阿里云（OSS）。之前公司从没用过这种方式，于是查看了文档，整理记录下操作实现流程。
我的项目是vue的项目，基于element-ui的组件库进行开发，因此，上传图片之类的第一个想到的就是upload上传组件。关于upload组件，不熟悉的可以去看一下element-ui的文档：https://element.eleme.cn/#/zhCN/component/upload#methods
以下upload组件的内容：
只能上传jpg/jpeg/png文件，且不超过500kb,最多一次一张
其它的不做赘述，只介绍关键的一些东西，组件定义完成之后，就需要设置对应的方法：
uploadHttp({file}) {
console.log(file);
const name = 'avatar'
const fileName = `${name}/${Date.parse(new Date())}`; //定义唯一的文件名
client(this.dataObj).put(fileName, file).then(({res, url}) => {
if (res && res.status == 200) {
this.form.avatar = url
// console.log(`阿里云OSS上传图片成功回调`, res, url, name);
}
}).catch((err) => {
console.log(`阿里云OSS上传图片失败回调`, err);
});
},
/**
* 图片限制
*/
beforeAvatarUpload (file) {
const isJPEG = file.name.split('.')[1] === 'jpeg';
const isJPG = file.name.split('.')[1] === 'jpg';
const isPNG = file.name.split('.')[1] === 'png';
const isLt500K = file.size / 1024 / 500 < 2;
if (!isJPG && !isJPEG && !isPNG) {
this.$message.error('上传图片只能是 JPEG/JPG/PNG 格式!');
}
if (!isLt500K) {
this.$message.error('单张图片大小不能超过 500KB!');
}
return (isJPEG || isJPG || isPNG) && isLt500K;
}
三个方法都是upload组件中定义的，执行时机可以查看文档
这是我写好的代码，我们一步步解析。
首先要了解阿里云的上传服务是如何做的：关于阿里云服务的购买与设置我是不太清楚的，只是负责前端工作内容处理。
对于陌生的东西，我们你首先要有查的精神，直接打开浏览器搜索阿里云的oss存储对象网址：https://help.aliyun.com/product/31815.htmlspm=a2c4g.750001.list.23.5e777b13AEHUf3
我是前端，直接找到
从安装到开始有详细的讲解：
首先安装SDK包：
npm install ali-oss
安装成功之后引入，我是创建了一个js文件引入配置：
const OSS = require('ali-oss')
export function client(data) {
//后端接口返回数据
return new OSS({
accessKeyId: data.xxx
accessKeySecret: data.xxx
stsToken: data.xxx，
region: "xxx", // oss地区
bucket: data.xxx,
})
}
这些的配置都是后端给的，有一个专门的接口，返回关于oss配置信息，这些是必须的，由创建oss存储的人提供给你，我这边就是接口
在页面中引入该js文件：
import {client} from "@/utils/upload.js"
获取oss配置信息：
mounted() {
this.getOss()
},
methods: {
getOss(){
ossGet().then(res=>{
if(res.code === 0){
this.dataObj = res.data
}
}).catch(err=>{
console.log(err);
})
},
}
之后就可以调用了。oss给我们提供了两种上传模式，一种简单的文件直接上传。另一种就是分片上传。而我的项目上传文件不大，使用简单上传，如果需要分片上传的可以参考文档去做，差别不大
在上面代码中，uploadHttp（）方法中，我调用了引入的client
const name = 'avatar'
const fileName = `${name}/${Date.parse(new Date())}`; //定义唯一的文件名
client(this.dataObj).put(fileName, file).then(({res, url, name}) => {
if (res && res.status == 200) {
this.form.avatar = url
// console.log(`阿里云OSS上传图片成功回调`, res, url, name);
}
}).catch((err) => {
console.log(`阿里云OSS上传图片失败回调`, err);
});
},
oss提供了put方法，该方法需要两个参数，fileName为自定义的文件名，file是文件对象
我定义的name是需要设置人员给我们定义一个存储的文件名，我们给后面加上一个时间戳就可以定义唯一文件名了。
put方法成功时会有url返回，这个url就是你的图片上传后的地址，通过这个地址就可以访问
但是我在上传时遇到了问题，上传一直报错，跨域错误。我看了文档介绍，是阿里云设置的问题，不归我们管，在购买设置时需要进行跨域设置，官方文档有说明。但是，一定要注意，让他们配置好！只要报错跨域，就找配置的人，跟我们前端代码没有关系的，阿里云有需要专门设置跨域。安卓的好像不会有问题（我们的安卓就可以上传），但是pc浏览器上传一定要配置。
以上就是阿里云上传过程，项目还未进入测试阶段，不知道会不会有问题，但是图片上传是成功的，可行的，如果我介绍的不太清楚，可以看看文档，或者联系我。如有问题，欢迎指出，谢谢