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>

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

目录
相关文章
|
1月前
|
存储 JSON 小程序
微信小程序入门之新建并认识小程序结构
微信小程序入门之新建并认识小程序结构
50 1
|
30天前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
200 3
|
30天前
|
移动开发 安全 API
微信H5支付--微信JS-SDK支付--点金计划
本文详细介绍了微信H5支付和JS-SDK支付的原理、配置和开发流程,涵盖了H5支付在移动端浏览器外唤起微信支付的细节,以及JS-SDK支付在微信内置浏览器中完成支付的相关注意事项。文章还针对微信支付常见问题,提供了解决方案和代码示例。最后,文章深入解析了微信支付点金计划,包括商家小票的自定义开发、API接口以及支付成功后的页面展示逻辑,为开发者提供了完整的开发参考。
34 0
微信H5支付--微信JS-SDK支付--点金计划
|
1月前
|
小程序 JavaScript API
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
这篇文章介绍了如何在uni-app和微信小程序中实现将图片保存到用户手机相册的功能。
525 0
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
|
1月前
|
移动开发 小程序 数据可视化
一招学会DIY官网可视化设计支持导出微擎、UNIAPP、H5、微信小程序源码
一招学会DIY官网可视化设计支持导出微擎、UNIAPP、H5、微信小程序源码
40 2
|
1月前
|
小程序 数据可视化 API
低代码可视化-uniapp商城首页小程序-代码生成器
低代码可视化-uniapp商城首页小程序-代码生成器
26 0
|
1月前
|
存储 移动开发 小程序
uniapp富文本editor输入二次扩展兼容微信小程序
uniapp富文本editor输入二次扩展兼容微信小程序
61 0
|
1月前
|
小程序
uniapp实现微信小程序隐私协议组件封装
uniapp实现微信小程序隐私协议组件封装
44 0
|
30天前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
452 7
|
30天前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
502 1