uni-app upload pictures and files case code reference

as the picture shows:

To upload pictures, use the official api of uni.chooseImage. The number of counts depends on your own needs. We can only upload up to 9 pictures

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));
           }
       })
   })
},

Data submitted to posterity

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

Print photoList as shown in the figure:

The LFile plugin used to upload files https://ext.dcloud.net.cn/plugin?id=4109

According to the official website case

//Upload attachments
uploadFile() { const that = this; if(that.imgUploadList.length >= 9){ this.$mHelper.toast('Upload 9 pieces at most') return; } that.$refs.lFile.upload ({ // #ifdef APP-PLUS currentWebview: that.$mp.page.$getAppWebview(), // #endif url: 'xxxxxx', //your upload attachment interface address name: 'file' }, }) ; },

//upload successfully
           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})                }            }, / /Judging according to the file extension name, displaying the corresponding icon 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";
           },
//File preview
           previewFile(item){                uni.downloadFile({                    url: item.url,                    success: (res) => {                        let filePath = res. tempFilePath;                        uni.openDocument({                            filePath: filePath,                            success: (res) => {                                console.log('Open document successfully');                            }                        })                    }                })            },

uni-app upload pictures and files case code reference

Guess you like