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

Table of Contents

---

导文

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

上传图片

登录后复制

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

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.

是使用 <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*/

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.
• 11.
• 12.
• 13.
• 14.
• 15.
• 16.
• 17.
• 18.
• 19.
• 20.
• 21.
• 22.
• 23.
• 24.
• 25.
• 26.
• 27.
• 28.
• 29.
• 30.
• 31.
• 32.
• 33.
• 34.
• 35.
• 36.
• 37.
• 38.
• 39.
• 40.
• 41.
• 42.
• 43.
• 44.
• 45.
• 46.

微信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*/

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.
• 11.
• 12.
• 13.
• 14.
• 15.
• 16.
• 17.
• 18.
• 19.
• 20.
• 21.
• 22.
• 23.
• 24.
• 25.
• 26.
• 27.
• 28.
• 29.
• 30.
• 31.
• 32.
• 33.
• 34.
• 35.
• 36.
• 37.
• 38.
• 39.
• 40.
• 41.
• 42.

总代码展示

登录后复制

<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.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.
• 11.
• 12.
• 13.
• 14.
• 15.
• 16.
• 17.
• 18.
• 19.
• 20.
• 21.
• 22.
• 23.
• 24.
• 25.
• 26.
• 27.
• 28.
• 29.
• 30.
• 31.
• 32.
• 33.
• 34.
• 35.
• 36.
• 37.
• 38.
• 39.
• 40.
• 41.
• 42.
• 43.
• 44.
• 45.
• 46.
• 47.
• 48.
• 49.
• 50.
• 51.
• 52.
• 53.
• 54.
• 55.
• 56.
• 57.
• 58.
• 59.
• 60.
• 61.
• 62.
• 63.
• 64.
• 65.
• 66.
• 67.
• 68.
• 69.
• 70.
• 71.
• 72.
• 73.
• 74.
• 75.
• 76.
• 77.
• 78.
• 79.
• 80.
• 81.
• 82.
• 83.
• 84.
• 85.
• 86.
• 87.
• 88.
• 89.
• 90.
• 91.
• 92.
• 93.
• 94.
• 95.
• 96.
• 97.
• 98.
• 99.
• 100.
• 101.
• 102.
• 103.
• 104.
• 105.
• 106.
• 107.
• 108.
• 109.
• 110.
• 111.
• 112.
• 113.
• 114.
• 115.
• 116.
• 117.
• 118.
• 119.
• 120.
• 121.
• 122.
• 123.
• 124.
• 125.
• 126.
• 127.
• 128.
• 129.
• 130.
• 131.
• 132.
• 133.
• 134.
• 135.
• 136.
• 137.
• 138.
• 139.
• 140.
• 141.
• 142.
• 143.
• 144.
• 145.
• 146.
• 147.
• 148.
• 149.
• 150.
• 151.
• 152.
• 153.
• 154.
• 155.
• 156.

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

原创作者: u_15967048 转载于: https://blog.51cto.com/u_15967048/11811547