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

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

原

荐

开发十年，就只剩下这套 Java 开发体系了 >>>

** 本文的上传模式是前端直传七牛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
    })
}

小徐同学

粉丝 44

博文 11

码字总数 5432

作品 0

广州

程序员