Element-UI での Upload コンポーネントの使用

(CSDN初めて書きました、下手でごめんなさい！)

1. Element の公式サイトで Upload の関連パラメータ構成を確認できますが、アクションの実装原理を知らない人も多いと思いますし、私も知りません。しかし、Element-UI Upload コンポーネントを使用して画像をアップロードしたいのですが、どうすればよいでしょうか? また、多くの記事を読みました。私の理解と解決策について話させてください。議論を歓迎します。

<el-upload class="upload-demo" drag multiple action="#" 
    :http-request="Upload_file" 
    :before-upload="beforeUpload"
    >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">
            将文件拖到此处，或
            <em>点击上传</em>
        </div>
        <template #tip>
            <div class="el-upload__tip">
                只能上传 jpg/png 文件，且不超过 500kb
            </div>
        </template>
</el-upload>

2. 上記のコードは Upload コンポーネントを直接コピーし、action='#'; を構成します (http-request: デフォルトのアップロード動作をオーバーライドし、アップロードの実装をカスタマイズできるため、ここでこのアクションアドレスを構成する必要はありません)。

3. このコンポーネントでは、before-upload と http-request の 2 つの属性を構成しました。機能は次のとおりです。

3.1 アップロード前: アップロードする前に、ファイルの種類、ファイルのサイズ、ファイルのパラメーターを受け取ることができるかどうかなど、いくつかのチェックを行います.出力ファイルについては、誰もが理解する必要があると思います.

3.2 http-request: アップロードされたファイルを処理するためのコードです。ユーザーがアップロードした画像情報を取得すると、データベースに保存する必要があるため、base64形式のファイルを使用する必要があります。

/* 自定义上传文件 */
function Upload_file(data){       // data是上传的文件信息，里面有我们想要的file属性
    let reader = new FileReader() // 创建文件读取对象
    let file = data.file
    reader.readAsDataURL(file) // 文件读取转换为base64类型
    reader.onloadend = function (e) {
        console.log(e.target.result);
    }
}

4. コンソールは base64 ファイルデータを出力します。

5. このデータを取得したら, 後でそれについて話す必要はありません. 確認して確認する時が来ました. データベースのテキスト形式を使用して問題を解決できます. Upload コンポーネントを介して, 次の方法でデータを取得できます.私たち自身。

ヒント：何か間違っている場合は、私を修正してください〜

Element-UI での Upload コンポーネントの使用

おすすめ