uni-app上传图片和文件

爱深求 發表於 2022-6-14 17:04:00

如图所示：
 <img src="https://img2022.cnblogs.com/blog/1161361/202206/1161361-20220614170157977-702025124.png" alt="" loading="lazy">
 
 
上传图片,使用的是uni.chooseImage这个官方api，count 数量根据自己的需求来，我们是最多只能上传9张
<div class="cnblogs_code">
<pre> 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();
 }
 });
 },</pre>
</div>
<div class="cnblogs_code">
<pre>uploads(){
const _this = this;
returnPromise.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));
 }
 })
})
},</pre>
</div>
 
 提交给后代的数据
 //提交 async submitFlood(){ 　　let photoList = await this.uploads(); } 打印photoList如图：
 <img src="https://img2022.cnblogs.com/blog/1161361/202206/1161361-20220614170244278-970541362.png" alt="" loading="lazy">
 
 
 上传文件使用的LFile 这个插件 https://ext.dcloud.net.cn/plugin?id=4109
根据官网案例来
<div class="cnblogs_code">
<pre>
 //上传附件
 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'
 },
 });
 },</pre>
</div>
<div class="cnblogs_code">
<pre> //上传成功
 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('打开文档成功');
 }
 })
 }
 })
 },</pre>
</div>
 
 

</div>
<div id="MySignature" role="contentinfo">
本文来自博客园，作者：喆星高照，转载请注明原文链接：https://www.cnblogs.com/houxianzhou/p/16375411.html 
来源：https://www.cnblogs.com/houxianzhou/p/16375411.html

頁: [1]

琼殿技术论坛's Archiver

uni-app上传图片和文件