VueはOSSを使用して画像や添付ファイルをアップロードします

const OSS = require('ali-oss')

定数OSSConfig = {
  uploadHost: 'http://xxxxx.oss-cn-shenzhen.aliyuncs.com', //OSSアップロードアドレスossParams: {
    地域: 'oss-cn-shenzhen',
    success_action_status: '200', // デフォルトは 200
    アクセスキーID: 'LTxxxxxxxxxxxxxxxvnkD',
    アクセスキーシークレット: 'J6xxxxxxxxxxxxxxxxiuv',
    バケット: 'xxxxxxxx-czx'、
  },
}

関数 random_string(len) {
  長さ = 長さ || 32
  var chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'
  var maxPos = 文字数.長さ
  var pwd = ''
  (i = 0; i < len; i++) の場合 {
    pwd += chars.charAt(Math.floor(Math.random() * maxPos))
  }
  パスワードを返す
}

関数 uploadOSS(ファイル) {
  新しい Promise(async (resolve, reject) => { を返します。
    const ファイル名 = `${ランダム文字列(6)}_${ファイル名}`
    クライアント = 新しいOSS({
      リージョン: OSSConfig.ossParams.region、
      アクセスキーID: OSSConfig.ossParams.accessKeyId、
      アクセスキーシークレット: OSSConfig.ossParams.accessKeySecret、
      バケット: OSSConfig.ossParams.bucket、
    })
    const res = client.multipartUpload(ファイル名、ファイル) を待機します。
    // 解決(res)
    // または次のように返します:
    解決する（{
        ファイル URL: `${OSSConfig.uploadHost}/${fileName}`,
        ファイル名: ファイル名
    })
  })
}

エクスポート { uploadOSS }

<テンプレート>
  <div class="ファイルのアップロード">
    <el-アップロード
      ref="ファイルアップロード"
      アクション=""
      :headers="アップロードプロパティのヘッダー"
      リストタイプ="絵カード"
      :ファイルリストを表示="false"
      :http-request="fnアップロードリクエスト"
      :on-success="ハンドル成功"
      :on-error="エラー処理"
      :before-upload="handleUpload"
    >
      <スロット></スロット>
    </el-アップロード>
  </div>
</テンプレート>

<スクリプト>
"@/utils/auth" から { getAccessToken、getRefreshToken、getAccessTokenTTL } をインポートします。
'@/utils/oss' から { uploadOSS } をインポートします。

エクスポートデフォルト{
  名前: "インデックス",
  データ（） {
    戻る {};
  },
  計算: {
    ユーザーアカウントID() {
      this.$store.state.user.userAccountID を返します。
    },
    アップロードプロパティ() {
      戻る {
        // アクション: `${process.env.VUE_APP_BASE_API}/api/file/upload`,
        ヘッダー: {
          // インターフェースにはトークンが必要な場合があります: "",
          認証: getAccessToken(),
        },
        データ： {}、
      };
    },
  },
  メソッド: {
    handleExceed(ファイル、ファイルリスト){
      // console.log(ファイル、ファイルリスト);
      this.$message.error('アップロードに失敗しました。アップロードできるファイルは 10 ファイルまでに制限してください。');
    },
    handleUpload(ファイル、ファイルリスト){
      // console.log(ファイル、ファイルリスト);
      var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)
      const extension = testmsg === 'xlsx' || testmsg === 'xls' || testmsg === 'docx' || testmsg === 'doc'
        || testmsg === 'pdf' || testmsg === 'zip' || testmsg === 'rar' || testmsg === 'ppt' || testmsg === 'txt'

      定数isLimit10M = ファイルサイズ / 1024 / 1024 < 10
      var ブール値 = false;
      if(拡張子 && isLimit10M){
        ブール値 = true;
      } それ以外 {
        ブール値 = false;
      }
      if(!拡張子) {
        this.$message.error('添付ファイルの種類を選択してください!');
        ブール値を返します。
      }
      if(!isLimit10M) {
        this.$message.error('アップロードに失敗しました。10Mを超えることはできません!');
        ブール値を返します。
      }
      ブール値を返します。
    },
    ハンドル成功(res) {
      // コンソールログ(res);
      もし（res）{
        this.$emit('fileData', res)
        this.$message.success("添付ファイルが正常にアップロードされました!");
      }
    },
    ハンドルエラー(err){
      this.$message.error('添付ファイルのアップロードに失敗しました!');
    },
    // 画像をアップロード async fnUploadRequest(options) {
      試す {
        // console.log(オプション);
        let file = options.file; // ファイルを取得する
        res = await uploadOSS(ファイル) とします。
        コンソールログ(res);
        //データを返します this.$emit("fileData", res);
        this.$message.success("添付ファイルが正常にアップロードされました!");
      } キャッチ (e) {
        this.$message.error('添付ファイルのアップロードに失敗しました!');
      }
    },
  },
};
</スクリプト>

<style lang="scss" スコープ>
::v-deep .el-アップロード、
.el-upload--画像カード{
  // 幅: 50px;
  高さ: 0px;
  境界線: なし;
  行の高さ: 0;
  表示: ブロック;
  背景: #f5f6fb;
}
.el-アップロード{
  幅: 50px;
}
.img-続き{
  幅: 50px;
  高さ: 24px;
  背景: #f5f6fb;
  .imgアイコン{
    色: #ccc;
  }
  .img-テキスト {
    フォントサイズ: 12px;
    高さ: 24px;
    色: #000;
  }
}
</スタイル>

  	<div class="タスクの詳細pr">
        <el-form-item label="報告理由" prop="taskDesc" 必須>
          <div class="flex-center アップロード位置">
            <ImgUpload @imgData="imgData" />
            <FileUpload クラス="ml10" @fileData="fileData" />
          </div>
          <el-入力
            タイプ="テキストエリア"
            v-model="ruleForm.taskDesc"
            placeholder="報告の理由を入力してください"
            最大長 = "200"
            @input="checkiptTaskDesc()"
          </el-input> ...
          <div class="ipt-taskDesc-length">{{checkIptTaskDescLen}}/200</div>
          <div class="img-list mt10 flex">
            <ImgZoomIn :imagesList="画像リスト" @deleteImg="deleteImg"></ImgZoomIn>
          </div>
          <div class="dotted-line" v-if="imagesList.length > 0 && filesList.length > 0"></div>
          <div class="ファイルアイテム">
            <HandleFile :filesList="ファイルリスト" @deleteFile="削除ファイル"></HandleFile>
          </div>
        </el-form-item>
      </div>