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('打开文档成功');
                           }
                       })
                   }
               })
           },

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

猜你喜欢

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