OSS を使用して Vue プロジェクトに画像や添付ファイルをアップロードするここでは、写真のアップロードと添付ファイルのアップロードに違いはなく、アップロードのプロセスは同じです。 1. 新しい oss.js ファイルを作成し、oss をカプセル化して使用します (ali-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 } 2. ページでoss.jsを使用するこれは、elementUI アップロード コンポーネントの 2 次カプセル化です。コンポーネント アクションは画像や添付ファイルのアップロードには使用されませんが、OSS アップロード メソッドが使用されます。 <テンプレート> <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> 効果は以下のとおりです これで、vue が OSS を使用して画像や添付ファイルをアップロードする方法についての説明は終わりです。vue が OSS を使用して画像や添付ファイルをアップロードする方法に関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
>>: クラウドサーバーを購入し、Alibaba Cloud に Pagoda Panel をインストールする手順
CSS のFlex(彈性布局)すると、Web ページのレイアウトを柔軟に制御できます。Flex Fl...
Dockerfileの作成yumソースを設定する cd /tmp/docker vim Docker...
Dockerfile の紹介Docker は、Dockerfile の内容を読み取ってイメージを自動...
背景フレックス レイアウトにより、配置とスペースの割り当てがより効果的に実現されます。最近、flex...
序文プロジェクトのニーズに応じて、Vue-touch を使用して、vue モバイル端末の左スワイプ編...
目次背景分析するデータシミュレーション1. 従業員テーブルと部門テーブルの2つのテーブルを作成します...
オペレーティングシステム: Ubuntu 17.04 64ビットMySQL バージョン: MySQL...
目次事件の原因解剖学ファイルの並べ替えファイルのソートが非常に遅いのですが、他に解決策はありますか?...
この記事では、Google 入力方法をインストールします。実は以前はSogou入力方式を使っていたの...
図書館運営クエリ1.SHOW DATABASE; ----すべてのデータベースを照会する2. SHO...
目次1. ジョブ実行のフォールトトレランス1.1 タスクフェイルオーバー戦略1.2 ジョブ再開戦略2...
現在、ますます多くのフロントエンド開発者が、元のテーブル レイアウトを xHTML + CSS に置...
/******************** * 仮想ファイルシステム VFS **********...
以前、開発で頻繁に pip ダウンロードを使用する必要がありました。pip ソースを国産ソースに変更...
目次モードパラメータハッシュ履歴ハッシュ履歴.push()ハッシュ履歴.replace()アドレスバ...