欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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-ui
npm 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+后缀的方式定义名字