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

---

导文

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>

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