uniapp写上传|微信小程序上传+微信h5上传

简介: 【8月更文挑战第7天】

导文

uniapp写上传|微信小程序上传+微信h5上传

上传图片

 <uni-file-picker
            @select="onFileSelected"
            @cancel="onFilePickerCancel"
            limit="1"
            class="weightPage-upload-but"
            file-mediatype="image"
          ></uni-file-picker>

是使用 <uni-file-picker> 组件,用于实现文件选择的功能:

  1. <uni-file-picker>: 这是一个自定义的文件选择器组件。可能是由你的项目或者某个前端框架提供的,其作用是为用户提供一个界面来选择文件。

  2. @select="onFileSelected": 这是一个事件监听器,当用户选择文件后,会调用 onFileSelected 方法(或者事件处理函数)。在这个函数中,你可以处理用户选择的文件,比如上传到服务器或者展示在界面上。

  3. @cancel="onFilePickerCancel": 这是另一个事件监听器,当用户取消文件选择时,会调用 onFilePickerCancel 方法(或者事件处理函数)。这个函数可以处理用户取消选择文件的情况,可能是清除界面上的选择或者显示一些提示信息。

  4. limit="1": 这个属性指定了用户可以选择的文件数量的限制,这里限制为最多选择一个文件。

  5. file-mediatype="image": 这是一个自定义属性,用来指定允许选择的文件类型。在这个例子中,只允许选择图片文件。这种限制可以在前端帮助用户选择正确类型的文件,避免不必要的错误。

微信小程序

  /*#ifdef MP-WEIXIN*/
        // 从微信小程序的本地缓存中取出 token
        let wxToken = wx.getStorageSync("token");
        let wxbaseURL = wx.getStorageSync("baseURL");
        console.log(wxToken, "wxToken");
        // 检查是否成功获取到值
        if (wxToken) {
   
          console.log(wxToken, "wxToken");
          uni.uploadFile({
   
            url: `${
     wxbaseURL}/mini/upload/image`, //需要传图片的后台接口
            filePath: filePath, // 上传图片 通过uni-app的uni-file-picker组件 函数返回
            name: "image", //文件名字
            header: {
   
              Authorization: "Bearer " + wxToken,
            },
            // formData: formData,

            formData: {
   
              type: Object,
              default() {
   
                return {
   
                  url: filePath,
                  name: "image.jpg",
                  type: "image/jpeg",
                };
              },
            },

            success: (res) => {
   
              const {
    data } = JSON.parse(res.data);
              console.log(data);
              this.weightData.img_url = data.url;
              uni.showToast({
   
                title: "图片上传成功",
                icon: "success",
                duration: 2000, // 提示持续时间,单位为毫秒
              });
            },

            fail: (e) => {
   
              console.log(e);
            },
          });
        }

        /*#endif*/

微信h5上传

 /*#ifdef H5*/
        let formData = new FormData();
        formData.append("file", {
   
          url: filePath,
          name: "image.jpg",
          type: "image/jpeg",
        });

        // 转换为普通 Object
        const formDataObj = {
   };
        for (let [key, value] of formData.entries()) {
   
          formDataObj[key] = value;
        }
        let Token = localStorage.getItem("token");
        let baseURL = localStorage.getItem("baseURL");
        // 检查是否成功获取到值
        if (Token) {
   
          uni.uploadFile({
   
            url: `${
     baseURL}/mini/upload/image`, //需要传图片的后台接口
            filePath: filePath, // 上传图片 通过uni-app的uni-file-picker组件 函数返回
            name: "image", //文件名字
            header: {
   
              Authorization: "Bearer " + Token,
            },
            formData: formDataObj,
            success: (res) => {
   
              console.log(JSON.parse(res.data));
              const {
    data } = JSON.parse(res.data);
              console.log(data);
              this.weightData.img_url = data.url;
              uni.showToast({
   
                title: "图片上传成功",
                icon: "success",
                duration: 2000, // 提示持续时间,单位为毫秒
              });
            },
            fail: (e) => {
   
              console.log(e);
            },
          });
        }
        /*#endif*/

总代码展示

<template>
  <view class="weightPage">
      <view class="weightPage-item-upload">
        <view class="weightPage-upload-but">
          <uni-file-picker
            @select="onFileSelected"
            @cancel="onFilePickerCancel"
            limit="1"
            class="weightPage-upload-but"
            file-mediatype="image"
          ></uni-file-picker>
        </view>

        <image
          class="weightPage-item-upload-img"
          v-if="weightData.img_url"
          :src="weightData.img_url"
          mode=""
        >
        </image>
        <image
          class="weightPage-item-upload-img"
          v-else
          src="@/static/checkDetails/upload.png"
          mode=""
        >
        </image>
    </view>
  </view>
</template>

<script>
export default {
    
  data() {
    
    return {
    
      weightData: {
    
        img_url: "",
      },
    };
  },
  methods: {
    
    handerUnit(item) {
    
      this.unit = item;
      console.log(item);
    },
    onFileSelected(e) {
    
      // 获取选中的文件路径
      const filePath = e.tempFiles[0].url;
      console.log(filePath);
      // 调用上传图片的方法
      this.uploadImage(filePath);
    },

    async uploadImage(filePath) {
    
      try {
    
        // 上传图片的API地址
        console.log(filePath, "filePath");

        /*#ifdef MP-WEIXIN*/
        // 从微信小程序的本地缓存中取出 token
        let wxToken = wx.getStorageSync("token");
        let wxbaseURL = wx.getStorageSync("baseURL");
        console.log(wxToken, "wxToken");
        // 检查是否成功获取到值
        if (wxToken) {
    
          console.log(wxToken, "wxToken");
          uni.uploadFile({
    
            url: `${
      wxbaseURL}/mini/upload/image`, //需要传图片的后台接口
            filePath: filePath, // 上传图片 通过uni-app的uni-file-picker组件 函数返回
            name: "image", //文件名字
            header: {
    
              Authorization: "Bearer " + wxToken,
            },
            // formData: formData,

            formData: {
    
              type: Object,
              default() {
    
                return {
    
                  url: filePath,
                  name: "image.jpg",
                  type: "image/jpeg",
                };
              },
            },

            success: (res) => {
    
              const {
     data } = JSON.parse(res.data);
              console.log(data);
              this.weightData.img_url = data.url;
              uni.showToast({
    
                title: "图片上传成功",
                icon: "success",
                duration: 2000, // 提示持续时间,单位为毫秒
              });
            },

            fail: (e) => {
    
              console.log(e);
            },
          });
        }

        /*#endif*/

        /*#ifdef H5*/
        let formData = new FormData();
        formData.append("file", {
    
          url: filePath,
          name: "image.jpg",
          type: "image/jpeg",
        });

        // 转换为普通 Object
        const formDataObj = {
    };
        for (let [key, value] of formData.entries()) {
    
          formDataObj[key] = value;
        }
        let Token = localStorage.getItem("token");
        let baseURL = localStorage.getItem("baseURL");
        // 检查是否成功获取到值
        if (Token) {
    
          uni.uploadFile({
    
            url: `${
      baseURL}/mini/upload/image`, //需要传图片的后台接口
            filePath: filePath, // 上传图片 通过uni-app的uni-file-picker组件 函数返回
            name: "image", //文件名字
            header: {
    
              Authorization: "Bearer " + Token,
            },
            formData: formDataObj,
            success: (res) => {
    
              console.log(JSON.parse(res.data));
              const {
     data } = JSON.parse(res.data);
              console.log(data);
              this.weightData.img_url = data.url;
              uni.showToast({
    
                title: "图片上传成功",
                icon: "success",
                duration: 2000, // 提示持续时间,单位为毫秒
              });
            },
            fail: (e) => {
    
              console.log(e);
            },
          });
        }
        /*#endif*/
        // 可以添加上传进度监听等额外逻辑
      } catch (error) {
    
        console.error("上传图片时发生错误", error);
      }
    },
  },
};
</script>

您好,我是肥晨。
欢迎关注我获取前端学习资源,日常分享技术变革,生存法则;行业内幕,洞察先机。

目录
相关文章
ly~
|
11天前
|
存储 供应链 小程序
除了微信小程序,PHP 还可以用于开发哪些类型的小程序?
除了微信小程序,PHP 还可用于开发多种类型的小程序,包括支付宝小程序、百度智能小程序、抖音小程序、企业内部小程序及行业特定小程序。在电商、生活服务、资讯、工具、娱乐、营销等领域,PHP 能有效管理商品信息、订单处理、支付接口、内容抓取、复杂计算、游戏数据、活动规则等多种业务。同时,在企业内部,PHP 可提升工作效率,实现审批流程、文件共享、生产计划等功能;在医疗和教育等行业,PHP 能管理患者信息、在线问诊、课程资源、成绩查询等重要数据。
ly~
46 6
|
2月前
|
小程序 前端开发 Java
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
JavaDog Chat v1.0.0 是一款基于 SpringBoot、MybatisPlus 和 uniapp 的简易聊天软件,兼容 H5、小程序和 APP,提供丰富的注释和简洁代码,适合初学者。主要功能包括登录注册、消息发送、好友管理及群组交流。
64 0
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
|
10天前
|
小程序 前端开发 API
微信小程序 - 调用微信 API 回调函数内拿不到 this 问题(解决方案)
本文讨论了在微信小程序中调用API回调函数时无法获取到`this`上下文的问题,并提供了解决方案。在回调函数中,使用一个变量(如`that`)来保存当前的`this`引用,然后在回调内部使用这个变量来访问当前页面的数据和方法。
|
2月前
|
小程序 前端开发 JavaScript
【项目实战】SpringBoot+uniapp+uview2打造一个企业黑红名单吐槽小程序
【避坑宝】是一款企业黑红名单吐槽小程序,旨在帮助打工人群体辨别企业优劣。该平台采用SpringBoot+MybatisPlus+uniapp+uview2等技术栈构建,具备丰富的注释与简洁的代码结构,非常适合实战练习与学习。通过小程序搜索“避坑宝”即可体验。
62 0
【项目实战】SpringBoot+uniapp+uview2打造一个企业黑红名单吐槽小程序
|
2月前
|
小程序 前端开发
|
2月前
|
小程序 前端开发
微信小程序商城,微信小程序微店 【毕业设计参考项目】
文章推荐了一个微信小程序商城项目作为毕业设计参考,该项目在Github上获得18.2k星,提供了详细的使用教程和前端页面实现,适合学习微信小程序开发和作为毕业设计项目。
微信小程序商城,微信小程序微店 【毕业设计参考项目】
|
2月前
|
小程序 JavaScript Java
微信小程序的后端开发需要使用什么语言?
【8月更文挑战第22天】微信小程序的后端开发需要使用什么语言?
333 65
|
11天前
|
小程序 JavaScript API
微信小程序开发学习之页面导航(声明式导航和编程式导航)
这篇文章介绍了微信小程序中页面导航的两种方式:声明式导航和编程式导航,包括如何导航到tabBar页面、非tabBar页面、后退导航,以及如何在导航过程中传递参数和获取传递的参数。
微信小程序开发学习之页面导航(声明式导航和编程式导航)
|
2月前
|
小程序 JavaScript
Taro@3.x+Vue@3.x+TS开发微信小程序,使用轮播图
本文介绍了使用 Taro 和 Vue 创建轮播组件的两种方法:一是通过 `&lt;swiper&gt;` 实现,二是利用 Nut UI 的 `&lt;nut-swiper&gt;` 组件实现。
Taro@3.x+Vue@3.x+TS开发微信小程序,使用轮播图
|
1月前
|
移动开发 小程序 JavaScript
uni-app开发微信小程序
本文详细介绍如何使用 uni-app 开发微信小程序,涵盖需求分析、架构思路及实施方案。主要功能包括用户登录、商品列表展示、商品详情、购物车及订单管理。技术栈采用 uni-app、uView UI 和 RESTful API。文章通过具体示例代码展示了从初始化项目、配置全局样式到实现各页面组件及 API 接口的全过程,并提供了完整的文件结构和配置文件示例。此外,还介绍了微信授权登录及后端接口模拟方法,确保项目的稳定性和安全性。通过本教程,读者可快速掌握使用 uni-app 开发微信小程序的方法。
65 3
下一篇
无影云桌面