Vue + ElementUI 如何优雅的上传文件到七牛OSS


声明:本文转载自https://my.oschina.net/xiaoxustudent/blog/2872495,转载目的在于传递更多信息,仅供学习交流之用。如有侵权行为,请联系我,我会及时删除。

** 本文的上传模式是前端直传七牛oss模式,后端只负责提供token,避免泄露accessKey **

原文:原文地址,里面有效果图

1.开通七牛OSS,创建bucket,并且实名认证,详细步骤自己看官网。传送门

2.引入七牛Java SDK

		<dependency>
			<groupId>com.qiniu</groupId>
			<artifactId>qiniu-java-sdk</artifactId>
			<version>[7.2.0, 7.2.99]</version>
		</dependency>

3.引入七牛Java SDK ,提供前端获取token API

    public void getToken(){
        String host = PropKit.get("qiniuHost");
        String accessKey = PropKit.get("qiniuAccessKey");
        String secretKey = PropKit.get("qiniuSecretKey");
        String bucket = PropKit.get("qiniuBucket");
        Auth auth = Auth.create(accessKey, secretKey);
        String token = auth.uploadToken(bucket);
        renderJson(RetKit.ok("token", token).set("host",host));
    }

4.Vue 安装七牛提供的sdk

npm install qiniu-js

5.Elment上传组件加入http-request参数,并且把action指向http://upload.qiniup.com/

<el-upload
      class="avatar-uploader"
      action="http://upload.qiniup.com/"
      :show-file-list="false"
      :on-success="handleAvatarSuccess"
      :before-upload="beforeAvatarUpload"
      :http-request="uploadRequest"
      >
      <img v-if="form.url" :src="form.url" class="avatar">
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>

6.编写上传JS,大体是上传的时候先向后台请求token,拿到token后调用七牛sdk直传。next 可以输出上传进度,complete上传完成。

uploadRequest: function(request) {
      getToken().then(res => {
        let token = res.token;
        let host = res.host;
        upload(
          token,
          request,
          next => {
            let total = next.total;
            console.log(total);
          },
          error => {
            console.log(error)
          },
          complete => {
            let hash = complete.hash;
            let key = complete.key;
            this.form.url = host + "/" + key;
            console.log(hash);
            console.log(key);
          }
        )
});
handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
},
beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isLt2M;
}
import * as qiniu from 'qiniu-js'
// token 找后端,obj 这里指代从 el-upload 接收到的 object
export const upload = (token, obj,next,error,complete) => {
    const {
        file
    } = obj

    // 关于 key 要怎么处理自行解决,但如果为 undefined 或者 null 会使用上传后的 hash 作为 key.
    const key = formatDate(new Date(),"yyyyMMddhhmmss") + getRandomInt(1000, 9999)

    // 因人而异,自行解决
    const putExtra = {
            fname: "",
            params: {},
            mimeType: [] || null
        },
        //       fname: string,文件原文件名
        // params: object,用来放置自定义变量
        // mimeType: null || array,用来限制上传文件类型,为 null 时表示不对文件类型限制;限制类型放到数组里: ["image/png", "image/jpeg", "image/gif"]
        config = {
            useCdnDomain: true,
            region: qiniu.region.z2
        }

    let options = {
        quality: 0.92,
        noCompressIfLarger: true,
        maxWidth: 1000,
        maxHeight: 618
    }

    qiniu.compressImage(file, options).then(data => {
        // 调用sdk上传接口获得相应的observable,控制上传和暂停
        let observable = qiniu.upload(data.dist, key, token, putExtra, config);
        let subscription = observable.subscribe(next,error,complete);
        return subscription
    }).catch(res => {
        console.log(res)
        return res
    })
}

本文发表于2018年11月07日 09:00
(c)注:本文转载自https://my.oschina.net/xiaoxustudent/blog/2872495,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如有侵权行为,请联系我们,我们会及时删除.

阅读 2816 讨论 0 喜欢 1

抢先体验

扫码体验
趣味小程序
文字表情生成器

闪念胶囊

你要过得好哇,这样我才能恨你啊,你要是过得不好,我都不知道该恨你还是拥抱你啊。

直抵黄龙府,与诸君痛饮尔。

那时陪伴我的人啊,你们如今在何方。

不出意外的话,我们再也不会见了,祝你前程似锦。

这世界真好,吃野东西也要留出这条命来看看

快捷链接
网站地图
提交友链
Copyright © 2016 - 2021 Cion.
All Rights Reserved.
京ICP备2021004668号-1