乐趣区

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

jiezi

导语：在日常开发过程中，前端常常要和后端进行接口联调，获取并且渲染数据到页面中，接下来就总结一下 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",
    });
  }
}

案例展现

申请办法预览

文件下载预览

  • 下载图片
  • 下载文件

文件上传预览

  • 上传图片

  • 上传文件

    最初

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

退出移动版