首页 > 网络编程 > JavaScript > javascript技巧 > uniapp封装请求上传下载

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

2023-09-14 11:11:08 作者：MarkGuan

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

原理分析

主要是使用uni.request方法来发送请求，uni.downloadFile方法来下载文件，uni.uploadFile方法来上传文件。

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

方法实现

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

数据请求

这个方法要接收一些参数，和现有默认参数合并，然后传给请求 API，获取数据后使用try...catch来处理成功和失败。

这里要引入一些文件，包括请求的域名和地址，以及一些通用方法，就先省略了，接口可以到网上找一下公共的，或者自己使用 node 搭建一个简易的接口服务器。

// 网络请求
async function request(options) {
  let isHttp = options.url.indexOf("http") &gt; -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") &gt; -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",
    });
  }
}