分享一下自己写的npm上传文件插件！

🌈 介绍

upload-ypy-sdk-gs是自己从零手写的上传文件到又拍云的插件，支持上传任何格式、任何大小的文件！

🌈 实现过程

1、主要文件

2、消息提示封装

因为涉及到上传进度提示，暂时将消息提示写在了插件里面

⛱️ 使用方法

0、插件目前只支持vue3+element-plus的项目

1、npm i upload-ypy-sdk-gs@1.0.2

2、main.js 里面 加入如下代码

import upload_ypy_sdk from 'upload-ypy-sdk-gs'
// const app = createApp(App);
app.config.globalProperties.upload_ypy_sdk = upload_ypy_sdk;

3、页面部分

<!-- 测试上传部分代码 -->
<div class="upload-file-wrap">
    <div>
        <input type="file" name="" id="fileinput" class="upload-file" />
        <el-button @click="uploadFn('fileinput')">上传文件</el-button>
    </div>
</div>

4、css部分

.upload-file {
    border: 1px solid #e2e2e2;
    padding: 7px 20px;
    border-radius: 5px;
    margin-right: 5px;
}

5、js部分

// 上传文件
const uploadFn = (id) => {
    const fileName = document.getElementById(id)?.files?.[0]?.name;
    if (fileName) {
        proxy.upload_ypy_sdk.uploadServe(id, 'file-path').then(
            (data) => {
               // 上传成功后的逻辑
               console.log('data', data);
            },
            (error) => {
               console.log(error);
            }
        );
    } else {
        eleActions.messagePoint('warning', '请选择文件后再上传哦');
    }
};

6、最后看看效果吧

可以看到，我们上传一个100M的视频是毫无压力的，事实上一次上传10个G的文件也是没有任何的问题！

7、这就是我们刚才上传的视频，上传后的地址是guoshao-service.test.upcdn.net/file-path/ + 文件名哦！