当前位置： 移动技术网 > IT编程>网页制作>CSS > Vue+Element-ui+OSS上传图片

Vue+Element-ui+OSS上传图片

2018年12月04日  | 移动技术网IT编程  | 我要评论

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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网