uniapp使用uni-file-picker實現上傳功能

更新時間：2024年07月23日 12:08:35 作者：奶糖肥晨

這篇文章主要介紹了uniapp使用uni-file-picker實現上傳功能,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下

html代碼

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

用image覆蓋，就能實現完全自定義上傳樣式的功能（也能用其他的覆蓋）
上傳前：

上傳后：

功能實現

  data() {
    return {
      weightData: {
        img_url: "",
      },
    };
  },
  methods: {
    onFileSelected(e) {
      // 獲取選中的文件路徑
      const filePath = e.tempFiles[0].url;
      console.log(filePath);
      // 調用上傳圖片的方法
      this.uploadImage(filePath);
    },
    async uploadImage(filePath) {
      try {
        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;
        }
        /*#ifdef MP-WEIXIN*/
        // 從微信小程序的本地緩存中取出 token
        let wxToken = wx.getStorageSync("token");
        let wxbaseURL = wx.getStorageSync("baseURL");
        // 檢查是否成功獲取到值
        if (wxToken) {
          uni.uploadFile({
            url: `${wxbaseURL}...`, //需要傳圖片的后臺接口
            filePath: filePath, // 上傳圖片 通過uni-app的uni-file-picker組件 函數返回
            name: "image", //文件名字
            header: {
              Authorization: "Bearer " + wxToken,
            },
            formData: formDataObj,
            success: (res) => {
              const { data } = JSON.parse(res.data);
              console.log(data);
              this.weightData.img_url = data.url;
              uni.showToast({
                title: "圖片上傳成功",
                icon: "success",
                duration: 2000, // 提示持續(xù)時間，單位為毫秒
              });
            },
            fail: (e) => {
              console.log(e);
            },
          });
        }
        /*#endif*/
        /*#ifdef H5*/
        let Token = localStorage.getItem("token");
        let baseURL = localStorage.getItem("baseURL");
        // 檢查是否成功獲取到值
        if (Token) {
          uni.uploadFile({
            url: `${baseURL}...`, //需要傳圖片的后臺接口
            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, // 提示持續(xù)時間，單位為毫秒
              });
            },
            fail: (e) => {
              console.log(e);
            },
          });
        }
        /*#endif*/
        // 可以添加上傳進度監(jiān)聽等額外邏輯
      } catch (error) {
        console.error("上傳圖片時發(fā)生錯誤", error);
      }
    },
    onFilePickerCancel() {
      console.log("取消選擇");
      // 可以在這里處理取消選擇的邏輯
    },
  },

css樣式代碼

隱藏樣式的重點是 opacity: 0;

    .weightPage-upload-but {
      position: absolute;
      width: 279px;
      height: 100px;
      z-index: 1;
      left: 0px;
      opacity: 0;
      padding: 10px;
    }
    .weightPage-item-upload-img {
      width: 80px;
      height: 78px;
      border-radius: 10px;
    }
    .weightPage-item-upload-text {
      font-size: 12px;
      font-weight: 500;
      line-height: 19px;
      color: rgba(153, 153, 153, 1);
      flex: 1;
      padding: 10px;
    }

到此這篇關于uniapp使用uni-file-picker實現上傳功能的文章就介紹到這了,更多相關uniapp uni-file-picker上傳內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: