uniapp图片、文件上传

Stitchhhhh / 2023-05-08 / 原文

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中，一站式集成。强烈推荐使用。

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

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

// 上传图片
chooseImg() {
    //chooseVideo
    uni.chooseImage({
        count: 3,
        success: (res) => {
            this.addFileMessage(res)
        },
    })
},
// 上传文件
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"]
        },]
    }, (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', '.xlsx', '.docx'],
        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) {
                    // 后端返回文件服务端地址进行回显
                }
            }
        })
    })
},