Vue+Element-ui+OSS上传图片
程序员文章站
2022-05-18 15:07:45
vue+element-ui+oss 上传图片
1、安装element-ui
npm i element-ui -s
2、安装阿里云的oss
npm install ali-oss
3、项目...
vue+element-ui+oss 上传图片
1、安装element-uinpm i element-ui -s
2、安装阿里云的oss
npm install ali-oss
3、项目使用了element-ui里面的上传(组件代码来自element-ui官网)
action:文件上传的地址;
on-change:文件状态改变时的钩子,添加文件、上传成功和上传失败时都会被调用;
file-list: 文件上传的列表
我们使用阿里云的oss服务就不能直接使用的组件的默认上传事件,组件提供了 一个http-request方法,可以覆盖默认的方法,实现自定义上传
点击上传只能上传jpg/png文件,且不超过500kb
<script> export default { data() { return { filelist3: [{ name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpegimagemogr2/thumbnail/360x360/format/webp/quality/100' }, { name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpegimagemogr2/thumbnail/360x360/format/webp/quality/100' }] }; }, methods: { handlechange(file, filelist) { this.filelist3 = filelist.slice(-3); } } } </script>
由于项目里使用的是阿里云的oss sts授权登陆(什么是sts),通过自定义的规则,向服务器发送一个获取ststoken请求,请求通过后返回结果可以是json/xml,拿到里面的accesskeyid、accesskeysecret、securitytoken参数
let client = new oss({ accesskeyid: data.accesskeyid, accesskeysecret: data.accesskeysecret, ststoken: data.securitytoken, region: 'oss-cn-shenzhen', // oss地区 bucket: '' }) const f = this.file.raw const storeas = 'product/' + date.parse(new date()) + suffix client.multipartupload(storeas, f).then(function (r1) { console.log('put success: ', r1) if (r1.res.status === 200) { console.log('上传了') } }).catch(function (err) { console.error('error: ', err) })
storeas是上传文件的名字,可以自定义,一般人会使用时间戳+后缀去定义。但是这一点很不好的是,如果在多线程下可能会出现重名的情况,所以推荐使用uuid+后缀的方式定义名字