elementui上傳圖片到七牛雲服務器

注冊七牛雲

首先，注冊七牛雲，並且完成實名認證，完成后會在個人中心->秘鑰管理中看到兩個秘鑰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;
    },
  },

action對應上傳的url查看

上傳地址查看：https://developer.qiniu.com/kodo/manual/1671/region-endpoint

七牛雲隨機分配域名查看

成果展示