关于uniapp:uniapp项目实践总结十二封装通用请求上传以及下载方法

导语：在日常开发过程中，前端常常要和后端进行接口联调，获取并且渲染数据到页面中，接下来就总结一下 uniapp 中获取申请、文件下载和上传的一些办法。

原理剖析

次要是应用uni.request办法来发送申请，uni.downloadFile办法来下载文件，uni.uploadFile办法来上传文件。

以下办法存于根目录下的scripts文件夹下的http.js文件中。

办法实现

接下来一一阐明如何实现数据申请、文件下载以及文件的上传的办法封装。

数据申请

这个办法要接管一些参数，和现有默认参数合并，而后传给申请 API，获取数据后应用try...catch来解决胜利和失败。

这里要引入一些文件，包含申请的域名和地址，以及一些通用办法，就先省略了，接口能够到网上找一下公共的，或者本人应用 node 搭建一个繁难的接口服务器。

// 网络申请async function request(options) {  let isHttp = options.url.indexOf("http") > -1;  let url = isHttp ? options.url : `${urls.baseUrl}${options.url}`;  let defultOptions = {    url,    method: options.method || "get",    data: options.data || null,    timeout: options.timeout || 30000,    dataType: options.dataType || "json",    header: options.header || {      "Content-Type": "application/json",    },    sslVerify: options.sslVerify || false,  };  let params = { ...options, ...defultOptions };  console.log("申请参数：", params);  try {    let result = await uni.request(params);    if (result.statusCode === 200) {      return result.data;    } else {      return {        code: 102,        msg: "get_fail",        data: {          info: result.errMsg,        },      };    }    return result;  } catch (e) {    return {      code: 101,      msg: "get_fail",      data: {        info: e,      },    };  }}

文件下载

这个就和申请一样，只不过 API 不一样，看一下内容。

// 下载文件async function download(options) {  let isHttp = options.url.indexOf("http") > -1;  let url = isHttp ? options.url : `${urls.baseUrl}${options.url}`;  let defultOptions = {    url,    timeout: options.timeout || 30000,    header: options.header || {},    filePath: options.filePath,  };  let params = { ...options, ...defultOptions };  console.log("下载参数：", params);  try {    let result = await uni.downloadFile(params);    if (result.statusCode === 200) {      return result.tempFilePath;    } else {      return {        code: 102,        msg: "download_fail",        data: {          info: result.errMsg,        },      };    }    return result;  } catch (e) {    return {      code: 101,      msg: "download_fail",      data: {        info: e,      },    };  }}

文件上传

文件上传同以上一样，简略封装一下。

// 上传文件async function upload(options) {  let isHttp = options.url.indexOf("http") > -1;  let url = isHttp ? options.url : `${urls.baseUrl}${options.url}`;  let defultOptions = {    url,    timeout: options.timeout || 30000,    filePath: options.filePath || "",    name: options.name || "file",  };  let params = { ...options, ...defultOptions };  console.log("上传参数：", params);  try {    let result = await uni.uploadFile(params);    if (result.statusCode === 200) {      return JSON.parse(result.data);    } else {      return {        code: 102,        msg: "upload_fail",        data: {          info: result.errMsg,        },      };    }    return result;  } catch (e) {    //TODO handle the exception    return {      code: 101,      msg: "upload_fail",      data: {        info: e,      },    };  }}

写好当前记得导出办法。

实战演练

模板内容

申请内容

<view class="list-http">  <button @click="sendReq">发动申请</button>  <text class="list-http-txt">响应内容：{{ httpInfo.request }}</text></view>

下载内容

<!-- 下载图片 --><view class="list-http">  <button @click="downloadImg">下载图片</button>  <text class="list-http-txt">响应内容：</text>  <image class="list-http-img" :src="httpInfo.imgUrl" mode="widthFix"></image></view><!-- 下载文件 --><view class="list-http">  <button @click="downloadFile">下载文件</button>  <text class="list-http-txt">响应内容：{{ httpInfo.fileUrl }}</text></view>

上传内容

<!-- 上传图片 --><view class="list-http">  <button @click="uploadImg">上传图片</button>  <text class="list-http-txt">响应内容：</text>  <image    class="list-http-img"    :src="httpInfo.uploadImgUrl"    mode="widthFix"  ></image></view><!-- 上传文件 --><!-- #ifdef H5 || MP-WEIXIN --><view class="list-http">  <uni-file-picker    ref="files"    :auto-upload="false"    limit="1"    title="最多抉择1个文件"    file-mediatype="all"    mode="list"    @select="fileSelect"    @progress="fileProgress"    @success="fileSuccess"    @fail="fileFail"  ></uni-file-picker>  <text class="list-http-txt">响应内容：{{ httpInfo.uploadFileUrl }}</text></view><!-- #endif -->

脚本办法

定义数据

let httpInfo = reactive({  request: null,  imgUrl: "",  fileUrl: "",  uploadImgUrl: "",  uploadFileUrl: "",});

申请办法

// 申请内容async function sendReq() {  let opts = {    url: proxy.$apis.urls.food,    method: "get",  };  let data = await proxy.$http.request(opts);  if (data.code == 200) {    httpInfo.request = JSON.stringify(data.data.list);  }  console.log("申请内容：", data);}

下载图片

// 下载图片async function downloadImg() {  let opts = {    url: proxy.$apis.urls.img,  };  let data = await proxy.$http.download(opts);  if (data) {    httpInfo.imgUrl = data;  }}

下载文件

// 下载文件async function downloadFile() {  let opts = {    url: proxy.$apis.urls.txt,  };  let data = await proxy.$http.download(opts);  console.log(data);  if (data) {    httpInfo.fileUrl = data;  }}

上传图片

// 上传图片async function uploadImg() {  uni.chooseImage({    complete(res) {      if (res.tempFiles) {        let file = res.tempFiles[0];        uploadSet(file.path);      }    },  });}

上传文件

// 上传文件// 获取上传状态function fileSelect(e) {  console.log("抉择文件：", e);  if (e.tempFiles) {    let file = e.tempFiles[0];    uploadSet(file.path, "file");  }}// 获取上传进度function fileProgress(e) {  console.log("上传进度：", e);}// 上传胜利function fileSuccess(e) {  console.log("上传胜利");}// 上传失败function fileFail(e) {  console.log("上传失败：", e);}

上传操作

// 上传操作async function uploadSet(filePath, type = "img") {  let opts = {    url: proxy.$apis.urls.upload,    filePath,  };  let data = await proxy.$http.upload(opts);  if (data.code == 200) {    httpInfo[type == "img" ? "uploadImgUrl" : "uploadFileUrl"] = data.data.url;    httpInfo.fileName = data.data.filename;  } else {    uni.showToast({      title: data.data.info,      icon: "error",    });  }}

案例展现

申请办法预览

文件下载预览

下载图片
下载文件

文件上传预览

上传图片
上传文件
最初

以上就是封装通用申请上传以及下载办法的次要内容，有不足之处，请多多斧正。

目录