腾讯云批量上传文件（前端）

腾讯云批量上传文件（前端）

前言：
1、腾讯云上传文件，遍历调用上传方法；
2、根据文件文件后缀名判断上传成功后，文件的回显形式；
3、在腾讯云建立存储桶；（需要后端配合写上传接口，线上测试）

1 . 效果样式（如下）

1、引入cos-js-sdk-v5.js文件

<script src="../sdk/cos-js-sdk-v5.js" charset="utf-8"></script>

2 . html代码片段（使用input上传）

<fieldset>
	//点击按钮触发
    <button class="up-img ml-25" type="button">上传文件</button>
    //隐藏input
    <input id="upload-file" type="file" title="上传文件" multiple style="display: none;">
    //图片回显展示
    <div class="image-box clearfix"></div>
    //文件回显展示
    <div class="file-box clearfix"></div>
</fieldset>

注：如果只是上传图片，input添加属性限制类型

<input id="upload-file" type="file" title="上传图片" style="display: none;" accept="image/*">

3 . js代码片段

//传给后台的数组，文件后缀名与全路径
var sflw_file = [];
var cos = new COS({
   
    getAuthorization: function (options, callback) {
   
        var url = '/xxx/';//接口
        var xhr = new XMLHttpRequest()