Image upload scheme based on OSS and Elment+

<template>
    <el-upload
        class="upload-demo"
        :action="host"
        :data="uploadKey"
        :accept="fileType"
        :drag="isDrag"
        :before-upload="beforeUpload"
        :on-change="uploadChange"
        :show-file-list="false"
    >
        <el-button size="small" :type="btnType" @click="getClientKey">
            {{ btnText }}
        </el-button>
    </el-upload>
</template>

<script lang="ts">
import { reactive, toRefs } from 'vue';
import { getThumbnailPolicy } from '@/api/oss';
import { ElMessage } from 'element-plus'; interface State { isDrag? : boolean; btnType? : string; btnText? : string; imgUrl: any; itemId: string; uploadKey: { key? : string; policy? : string; signature? : string; OSSAccessKeyId? : string; success_action_status? : number; }; host: string; dir: string; }export default {
    name: 'uploadBox'.props: {
        drag: {
            type: Boolean.default: false
        },
        btnType: {
            type: String.default: 'primary'
        },
        btnText: {
            type: String
        },
        fileType: {type: String}},emits: ['onFinish'].setup(props: any, { emit }: any) {
        const state = reactive<State>({
            isDrag: props.drag,
            btnType: props.btnType,
            btnText: props.btnText,
            itemId: props.itemId,
            imgUrl: ' '.uploadKey: {    // The parameters needed to upload to Aliyun
                key: ' '.policy: ' '.signature: ' '.OSSAccessKeyId: ' '.success_action_status: 200
            },
            host: ' '.// Upload the receipt to host
            dir: ' ' // Upload receipt dir
        });

        /** Before upload, click the button to get the upload parameter. Note that elplus must count before the actual upload, before- get the required parameters, upload,on-change is too late. * /
        const getClientKey = () = > {
            getThumbnailPolicy().then((res: any) = > {
                if (res.dir) {
                    state.uploadKey = {
                        policy: res.policy,
                        signature: res.signature,
                        OSSAccessKeyId: res.accessid,
                        success_action_status: 200}; state.host = res.host; state.dir = res.dir; }}); };const beforeUpload = (file: any) = > {
            const ext = file.type.split('/') [1];
            const uid = Math.floor(
                new Date().getTime() * Math.random() * Math.random()
            ); // Change the uid of file to a unique value that is less likely to be repeated
            state.uploadKey.key = `media/images/${uid}.${ext}`;
            state.imgUrl = uid;
            if (file.size > 1024 * 1024 * 100) {
                ElMessage.error('Single file${file.name}Cannot be larger than 100M ');
                return false;
            } else if (file.size <= 0) {
                ElMessage.error(` file${file.name}Cannot be null);
                return false; }};/*** * Upload status change function, such as adding a file, file upload success, file upload failure will call this function */
        const uploadChange = (file: any) = > {
            if (file.status === 'success') {
                const ext = file.raw.type.split('/') [1]; / / the suffix
                let imgUrl = `${state.host}/${state.dir}${state.imgUrl}.${ext}`;
                emit('onFinish', {arg});
            } else if (file.status === 'fail') {
                ElMessage.error('Upload failed, please re-upload'); }};return{... toRefs(state), uploadChange, beforeUpload, getClientKey }; }};</script>

Copy the code