uniapp的上传

hello&＃xff0c;我又要细说uniapp了

附件上传&＃xff0c;图片上传&＃xff0c;视频上传应该是目前手机比较常见的功能&＃xff0c;但是对于上传还是有一些需要注意

上传 - 一般有图片上传&＃xff0c;附件视频

图片上传

图片的上传 -  直接动手机或者摄像头

官网地址&＃xff1a;

uni-app官网

附件或者视频

官网&＃xff1a;

uni-app官网

注意 - 微信小程序和app是不支持这个api的 - 对于微信小程序wx.chooseMessageFile(可以从微信聊天会话中进行选择

关于app的上传附件&＃xff0c;可以利用原生进行&＃xff0c;这篇文章中有记录uniapp实现常用功能_哆来A梦没有口袋的博客-CSDN博客_uniapp常用功能

选择完之后就是上传&＃xff0c;uniapp有自己的上传

上传 

uni-app官网

上传也很好理解&＃xff0c;都有案例&＃xff0c;如果要上传自己的参数&＃xff0c;可以写在formData里面

其实写这篇文章主要不是讲这几个api,而是讲假设要自己上传附件给后端应该怎么做

用post,上传base64给后端

uni.getFileSystemManager() - 获取全局唯一的文件管理器&＃xff0c;利用readFile方法进行转码

要注意的是每个小程序有自己的规范

uni-app官网

写个案例

uni.chooseImage({count: 1,success: (res) &＃61;> {wx.getFileSystemManager().readFile({filePath: res.tempFilePaths[0],encoding: "base64",success: (result) &＃61;> {this.form[name] &＃61; &＃39;data:image/png;base64,&＃39; &＃43; result.data;this[name] &＃61; result.data;this.$forceUpdate();}})}})

这个base64文件就是你要传给后端的图片了&＃xff0c;

关于上传多个图片给后端

1&＃xff0c;循环遍历用uniapp自己的upload方法

2. 利用base64&＃xff0c; 在一个接口上传多个图片给后端

APP选择附件

 首先了解一下renderjs - uni-app官网

使用这个是因为当时上传附件使用u-view上传附件&＃xff0c;结果在h5可以上传附件&＃xff0c;但是其实在app端是不支持上传图片的&＃xff0c;但是做也没有注意&＃xff0c;为了解决这个问题&＃xff0c;就写了一个原生input来实现上传附件,

其实uniapp是有上传的api的&＃xff0c;但是刚好附件上传api只支持h5&＃xff0c;也不支持app,

上传附件组件

顺便贴一个封装的上传附件的代码

import {Config
} from &＃39;../utils/config.js&＃39;import $ from &＃39;&＃64;/js/jquery-3.4.1.min.js&＃39;class UploadApi {constructor() {}//obj为 u-upload控件 选择的文件返回 - obj.url// eg [{"url":"blob:http://localhost:8083/56d15704-2537-46fd-b188-fedfc2b8b35f","progress":0,"error":false,"file":{}}] uploadFile(formData, obj) {return new Promise((resolve, reject) &＃61;> {uni.uploadFile({url: Config.getInstance().getBaseUrl() &＃43; &＃39;/api/common/upload.do&＃39;,filePath: obj.url,name: &＃39;file&＃39;,formData: formData,success: res &＃61;> {const data &＃61; JSON.parse(res.data)// console.log("上传文件返回 data&＃xff1a;" &＃43; JSON.stringify(data))if (data.code &＃61;&＃61; "9000") {resolve(data.data)// console.log("上传文件返回 成功&＃xff1a;" &＃43; data.data)} else {reject(data)// console.log("上传文件返回 失败&＃xff1a;" &＃43; JSON.stringify(data))}},fail: (e) &＃61;> {console.log("上传文件fail返回&＃xff1a;" &＃43; e)reject(e)}})})}/*** &＃64;param {File} file 文件对象* &＃64;param {Integer} fileType 1 图片 2 视频 * */uploadFileByJquery(file, fileType) {return new Promise((resolve, reject) &＃61;> {var formData &＃61; new FormData();formData.append("file", file); //上传一个files对象formData.append("fileType", fileType); //需要上传的多个参数$.ajax({url: Config.getInstance().getBaseUrl() &＃43; &＃39;/api/common/upload.do&＃39;,type: "post",data: formData,processData: false,contentType: false,success: function(res) {resolve(res.data);},error: function(err) {reject("网络连接失败,稍后重试", err);}})})}/// 上传多图uploadFiles(formData, objs) {let num;if (objs) {num &＃61; objs.length;}return new Promise(async (resolve, reject) &＃61;> {let queue &＃61; new Array()try {for (let i &＃61; 0; i }export {UploadApi
}


除了上传&＃xff0c;一定还有回显&＃xff0c;预览图片和附件&＃xff0c;一定要记得地址要正确&＃xff0c;不然会显示失败

import {Config
} from &＃39;&＃64;/utils/config.js&＃39;;
const config &＃61; new Config();export function searchPdf(url) {let allUrl &＃61; url.replace("\\", "\/");if(!url.includes(&＃39;http&＃39;)) {allUrl &＃61; config.getImgPdfUrl() &＃43; allUrl;}console.log("allUrl: ",allUrl);if (url.includes(&＃39;jpeg&＃39;) || url.includes(&＃39;jpg&＃39;) || url.includes(&＃39;png&＃39;)) {console.log(allUrl, &＃39;ALLImag&＃39;)uni.previewImage({urls: [allUrl],fail: () &＃61;> {console.log("预览图片失败", JSON.stringify(err))uni.showToast({title: &＃39;预览图片失败&＃39;,icon: &＃39;none&＃39;});},success(index, tapIndex) {console.log("预览图片成功", index, tapIndex)}});return} else {uni.showLoading({title: &＃39;正在打开&＃xff0c;请等待&＃39;});uni.downloadFile({url: allUrl,fail: () &＃61;> {uni.hideLoading()uni.showToast({title: &＃39;预览文件失败&＃39;,icon: &＃39;none&＃39;});},success: function(res) {console.log(res, &＃39;res&＃39;)var filePath &＃61; res.tempFilePath;console.log(filePath, &＃39;folefasa&＃39;,filePath)uni.openDocument({filePath: filePath,success: function(res) {console.log("预览文件成功", res)uni.hideLoading();},fail(err) {console.log("预览文件失败", err)uni.hideLoading();uni.showToast({title: &＃39;预览文件失败&＃39;,icon: &＃39;none&＃39;});}});},})}}

码字不易&＃xff0c;点个赞啊&＃xff01;