文件上传组件

实现两种方式：

1.上传腾讯云、不推荐使用(最好不用这个方式，上传文件速度太慢)

2.文件上传(上传到后端提供的接口上)==>>更推荐使用这种

<template>
    <view class="file_upload">
        <h4>文件上传：</h4>
        <uni-file-picker limit="5" file-mediatype="all" title="最多选择5个文件" v-model="failList" @select="select">
        </uni-file-picker>
    </view>
</template>


<script>
    // 上传腾讯云需导入
    // import COS from '../../libs/COS.js'
    export default {
        data() {
            return {
                failList: []
            }
        },
        methods: {
            select(e) {
                console.log('文件上传', e)
                // 1.上传腾讯云、不推荐使用(最好不用这个方式，上传文件速度太慢)
                // let filePath = e.tempFiles[0].path;
                // let filename = filePath.substr(filePath.lastIndexOf('/') + 1);
                // COS.uploadFileToTencentClound(filename, filePath).then((res) => {
                //     console.log("[文件上传]", res)
                //     this.failList.push(res)
                // })

                // 2.文件上传(上传到后端提供的接口上)
                let that = this
                uni.showLoading({
                    title: "上传中"
                });
                const tempFilePaths = e.tempFilePaths;

                for (var i = 0; i < tempFilePaths.length; i++) {
                    const tempFile = e.tempFiles[i];
                    // console.log('文件上传00', tempFile)
                    uni.uploadFile({
                        // 以下地址根据项目开发修改，根据后端提供接口修改 ==>>> url: '基地址' + '上传的接口后缀'
                        url: 'http://test2.jz.cn/DataApi' + '/Project/UploadFileTemp',
                        // header: {
                        //     'Authorization': '根据需要填写'
                        // },
                        // formData: {
                        //     secretFlag: 'N',
                        //     fileLocation: 5
                        // },
                        filePath: tempFilePaths[i],
                        name: 'file',
                        success: (uploadFileRes) => {
                            uni.hideLoading();
                            const back = JSON.parse(uploadFileRes.data);
                            console.log('文件上传哒哒哒', back.Data)
                            // back.Data：获取的上传文件路径
                            // 以上获取到了文件路径，根据文件路径进行修改
                            // 以下数据处理根据业务需求变动
                            // this.failList.push(back.Data)
                            // console.log('文件列表数据', this.failList)
                        },
                        fail: () => {
                            uni.hideLoading();
                            uni.showToast("上传失败，请联系管理人员！")
                        },
                        complete: function() {
                            uni.hideLoading();
                        }
                    });
                }
            }
        }
    }
</script>


<style lang="scss" scoped>
    .file_upload {

        // 隐藏上传列表底部的进度条
        ::v-deep .file-picker__progress {
            display: none;
        }
    }
</style>

COS.js

const COS = require("./cos-wx-sdk-v5.js")
const Bucket = "BucketName-APPID"; //存储桶的名称，命名规则为 BucketName-APPID，此处填写的存储桶名称必须为此格式
const Region = "xxxxxxx"; //存储桶所在地域
//创建一个 COS SDK 实例
// SECRETID 和 SECRETKEY请登录 https://console.cloud.tencent.com/cam/capi 进行查看和管理
const cos = new COS({
    SecretId: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxx',
    SecretKey: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
});
//创建存储桶
cos.putBucket({
    Bucket: Bucket,
    Region: Region,
}, function(err, data) {
    console.log(err || data);
});

//查询存储桶列表
cos.getService(function(err, data) {
    console.log("[查询存储桶列表]")
    console.log(data && data.Buckets);
});
//删除

function deleteFileToTencentClound(Key) {
    return new Promise((resolve, reject) => {
        cos.deleteObject({
            Bucket: Bucket,
            Region: Region,
            Key: Key,
        }, function(err, data) {
            console.log(err || data);
            resolve(data)
        });
    })
}
//上传图片到腾讯云
function uploadFileToTencentClound(filename, filePath) {
    return new Promise((resolve, reject) => {
        cos.postObject({
                Bucket: Bucket,
                Region: Region,
                Key: 'FileUpload/' + filename,
                // Key: 'wxFile/' + filename,
                FilePath: filePath,
                onProgress: function(info) {
                    console.log("[cos.postObject-seccess]", JSON.stringify(info));
                }
            },
            function(err, data) {
                console.log("[cos.postObject-err]", err || data);
                resolve(data.headers.location)
            })
    })
}
export default {
    uploadFileToTencentClound,
    deleteFileToTencentClound
}

下载cos-wx-sdk-v5.js