关于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",
    });
  }
}

案例展现

申请办法预览

文件下载预览

下载图片
下载文件

文件上传预览

上传图片
上传文件

最初

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

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

目录

原理剖析

办法实现

数据申请

文件下载

文件上传

实战演练

模板内容

脚本办法

案例展现

申请办法预览

文件下载预览

文件上传预览

最初

评论

发表回复取消回复

更多文章

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

深入解析：基于Delta的线性数据结构模型，打造高效富文本编辑器

轻松管理社交媒体：使用Automa插件实现一键拉黑功能

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

目录

原理剖析

办法实现

数据申请

文件下载

文件上传

实战演练

模板内容

脚本办法

案例展现

申请办法预览

文件下载预览

文件上传预览

最初

评论

发表回复 取消回复

更多文章

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

深入解析：基于Delta的线性数据结构模型，打造高效富文本编辑器

轻松管理社交媒体：使用Automa插件实现一键拉黑功能

发表回复取消回复