uni-app上传图片和文件 案例代码参考

如图所示：

上传图片,使用的是uni.chooseImage这个官方api，count 数量根据自己的需求来，我们是最多只能上传9张

          uploadImgEvent(){
             uni.chooseImage({
                    count: 10 - this.uploadImgsList.length,
                    success: (res) => {
                    this.uploadImgsList.unshift(...res.tempFiles.map(item => ({
                        picturePath: item.path
                    })));
                    if(this.uploadImgsList.length == 10) this.uploadImgsList.pop();
                    }
            });
            },

uploads(){
    const _this = this;
return  Promise.all(_this.uploadImgsList.map(item=>_this.uploadImage(item.picturePath))).then(res=>{
            return res.map(item=>({
                 fileName:item.fileName,
                 filePath:item.url
            }))
   })
},
uploadImage(url) {
    return new Promise(async (resolve, reject) => {  
        uni.uploadFile({
            url: await getUploadUrl(), //后台地址
            filePath: url,
            name: 'file',
            success: (uploadFileRes) => {
                resolve(JSON.parse(uploadFileRes.data)); 
            }
        })
    })
},
 

         
提交给后代的数据

         //提交
           async submitFlood(){
               let photoList = await this.uploads();
            }         

打印photoList如图：

 

上传文件使用的LFile 这个插件  https://ext.dcloud.net.cn/plugin?id=4109

根据官网案例来

  

          //上传附件
            uploadFile() {
                const that = this;
                if(that.imgUploadList.length >= 9){
                    this.$mHelper.toast('最多上传9张')
                    return;
                }
                that.$refs.lFile.upload({
                        // #ifdef APP-PLUS
                        currentWebview: that.$mp.page.$getAppWebview(),
                        // #endif
                        url: 'xxxxxx', //你的上传附件接口地址
                        name: 'file'
                        },
                    });
            },

         //上传成功
            upSuccess(res) {
                let url = res.root.url;
                let name = res.root.originalName;
                let fileType = this.isFileType(res.root.type);
                let size = res.root.size;
                if(fileType == 'image'){
                    this.imgUploadList.push({url,name,fileType,size});
                }else{
                    this.fileUploadList.push({url,name,fileType,size})
                }
            },
         //根据文件后缀名来判断，展示对应的图标
        isImage(type){
                return ['png','jpg','jpeg','gif','svg'].includes(type.toLowerCase());
            },
            isDocx(type){
                return ['doc','docx'].includes(type.toLowerCase());
            },
            isXsls(type){
                return ['xsls','xsl'].includes(type.toLowerCase());
            },
            isText(type){
                return ['text','txt'].includes(type.toLowerCase());
            },
            isFileType(type){
                if(this.isImage(type)) return 'image';
                if(this.isXsls(type)) return 'excel';
                if(type == 'pdf') return 'pdf';
                if(this.isDocx(type)) return 'word';
                if(this.isText(type)) return "text";
                // return "#icon-file-b--6";
            },
           //文件预览
            previewFile(item){
                uni.downloadFile({
                    url: item.url,
                    success: (res) => {
                        let filePath = res.tempFilePath;
                        uni.openDocument({
                            filePath: filePath,
                            success: (res) => {
                                console.log('打开文档成功');
                            }
                        })
                    }
                })
            },