elementui上传图片到七牛云服务器

2022-11-10 13:51:50

注册七牛云

首先，注册七牛云，并且完成实名认证，完成后会在个人中心->秘钥管理中看到两个秘钥AccessKey/SecretKey

创建存储空间(必须要实名认证）

生成上传凭证

为了实现上传，我们还需要生成上传凭证，关于凭证，可以参看文档，并且在文档结束后还有demo，因为是个人项目，为了简单，我直接从demo中生成了deadline为1000多小时的秘钥，确保不会过期,

填入ak,sk,以及bucketName(就是开始创建的对象存储空间的名字)，deadline修改demo的源代码再重新运行即可。

代码演示

<el-form-item label="缩略图" label-width="90px" class="img-item" prop="thumb">

            <el-upload

              class="avatar-uploader"

              action="http://upload.qiniup.com"            // 这是上传的url，可以在七牛开发者平台中找到，也可看LZ下面贴出来的图片以及url查找

              :data="qn"                                                // qn包括token与key，token是上述生成的上传凭证，*的key可以上传到七牛中     存储空间对应不同的图片名

              :show-file-list="false"

              :on-success="handleSuccess"

              :before-upload="beforeUpload"

              :on-progress="handlePro"

              :on-error="handleError"

            >

              <img v-if="formData.thumb" :src="formData.thumb" class="avatar">

              <i v-else class="el-icon-plus avatar-uploader-icon"></i>

            </el-upload>

            <el-input style="margin-top:20px;" v-model="formData.thumb" size="small" class="link"></el-input>

            <el-progress :percentage="percent" v-if="percent !== 0 && percent !== 100"></el-progress>

          </el-form-item>

....................................................

qn: {

        token: "生成凭证中生成的token",

        key: ""

      },

methods: {

    // 上传成功

    handleSuccess(res, file) {

      this.formData.thumb = "http://plrtqxkn3.bkt.clouddn.com/" + res.key;   // 这边显示图片，上传成功后会返回一个对象，包含一个hash和一个key,然后前边加上七牛云为你随机分配的域名就是图片的外链。查看这个域名可看下面的描述

    },

    // 上传之前判断

    beforeUpload(file) {

      this.qn.key = file.name;        // 通过设置key为文件名，上传到七牛中会显示对应的图片名

      // debugger

      const isJPG = file.type === "image/jpeg" || file.type === "image/png";

      const isLt10M = file.size / 1024 / 1024 < 10;

      if (!isJPG) {

        error("上传头像图片只能是 JPG/PNG 格式!");

      }

      if (!isLt10M) {

        error("上传头像图片大小不能超过 10MB!");

      }

      return isJPG && isLt10M;

    },

  },