uniapp图片、视频、文件上传

uni.chooseFile(OBJECT)

平台差异说明

App	H5	微信小程序	支付宝小程序	百度小程序	字节跳动小程序、飞书小程序	QQ小程序	快手小程序	京东小程序
x	√(HBuilder X2.9.9+)	x(可使用wx.chooseMessageFile)	x	x	x	x	x	x

• App端如需选择非媒体文件，可在插件市场搜索文件选择，其中Android端可以使用Native.js，无需原生插件，而iOS端需要原生插件。
• App端如果想选择下载到_doc、_downloads、_documents等plus.io控制的目录下的文件，可通过plus.io Api，自己做选择框。
• 选择文件大多为了上传，uni ui封装了更完善的uni-file-picker组件，文件选择、上传到uniCloud的免费存储和cdn中，一站式集成。强烈推荐使用。

 

示例使用的插件“文件选择，支持自定义路径，自定义筛选类型，多选”

使用插件要配置并自定义基座，详情可参考：https://www.cnblogs.com/angia/p/17381643.html

// #ifdef APP-PLUS
var AfDocument = uni.requireNativePlugin("Aq-ChooseFile");
// #endif

// 上传图片和视频
chooseImg() {
    // 仅支持app端，H5使用上传文件的方式
　　plus.gallery.pick((e) => {
　　　　const res = {
　　　　　　tempFilePaths: e.files         
　　　　}
　　　　this.addFileMessage(res)
　　}, function (e) {
　　　　console.log("取消选择图片");
　　}, { filter: "none", multiple: true, maximum: 3 })

},
// 上传文件
chooseFile() {
    // #ifdef APP-PLUS
    AfDocument.openMode({
        size: '1', //选择总数量
        // paths:['/storage/emulated/0/Download','/storage/emulated/0/A',],   //自定义选择目录
        isDown: true, //是否下钻（true 筛选当前目录以下的所有文件，fales 只筛选当前目录文件） 
        types: [{
            name: '文档',
            value: ["doc", "wps", "docx", "xls", "xlsx", "pdf", "txt"]
        },]
    }, (data) => {
        const paths = data.res.map(item => {
            return item.path
        })
        const res = {
            tempFilePaths: paths
        }
        this.addFileMessage(res)
    })
    // #endif
    // #ifdef H5
    uni.chooseFile({
        count: 1,
        extension: [".doc", ".wps", ".docx", ".xls", ".xlsx", ".pdf", '.txt', '.jpg', '.png', ".mp4"], 
        success: (res) => {
            this.addFileMessage(res)
        }
    })
    // #endif
},
addFileMessage({ tempFilePaths }) {
    tempFilePaths.forEach((item) => {
        const files = [{
            uri: item,
            name: 'files'
        }]
        let formData = {'userId': this.userId}
        let url = 'addAttachment'// 请求后端
        uni.uploadFile({
            header: {
                Authorization: this.token,
            },
            url: http.config.baseUrl + url,// 请求路径
            formData,
            files,
            success: (res) => {
                if (res.statusCode == 200) {
                    // 后端返回文件服务端地址进行回显
                }
            }
        })
    })
},