快捷導(dǎo)航

uni-file-picker文件選擇上傳功能實(shí)現(xiàn)代碼

更新時間：2024年09月27日 12:20:19 作者：扶蘇1002

本文介紹了uni-file-picker的基礎(chǔ)使用方法,包括選擇圖片的九宮格樣式、限制選擇的圖片數(shù)量、指定圖片類型及后綴,以及如何自定義上傳時機(jī),詳細(xì)說明了如何通過設(shè)置不同的屬性來實(shí)現(xiàn)圖片的選擇和上傳,適用于需要在應(yīng)用中上傳圖片的開發(fā)者

一、基礎(chǔ)用法

uni-file-picker文檔說明

mode="grid" ，可以使用九宮格樣式選擇圖片

limit="1" ，則最多選擇張圖片

file-mediatype="image"，限定只選擇圖片

file-extname='png,jpg'，限定只選擇 png和jpg后綴的圖片

auto-upload="false",可以停止自動上傳，通過ref調(diào)用upload方法自行選擇上傳時機(jī)。與ref="files"搭配使用，this.$refs.files.upload()

<uni-file-picker 
    v-model="imageValue"  
    file-mediatype="image"
    mode="grid"
    file-extname="png,jpg"
    :limit="1"
    @progress="progress" 
    @success="success" 
    @fail="fail" 
    @select="select"
/>
<script>
    export default {
        data() {
            return {
                imageValue:[]
            }
        },
        methods:{
            // 獲取上傳狀態(tài)
            select(e){
                console.log('選擇文件：',e)
            },
            // 獲取上傳進(jìn)度
            progress(e){
                console.log('上傳進(jìn)度：',e)
            },
            // 上傳成功
            success(e){
                console.log('上傳成功')
            },
            // 上傳失敗
            fail(e){
                console.log('上傳失?。?,e)
            }
        }
    }
</script>

二、案例一（只上傳一張圖片）

<template>
  <view class="container example">
    <uni-forms ref="baseForm" :modelValue="baseFormData" label-position="top">
      <uni-forms-item label="圖片上傳">
       <uni-file-picker 
        v-model="imageValue" 
        fileMediatype="image" 
        mode="grid" 
        @select="select"   
        limit="1"
        ></uni-file-picker>
      </uni-forms-item>
    </uni-forms>
  </view>
</template>
export default {
    data() {
      return {
        //圖片
        imageValue:[],
      }
    },
    methods:{
      //圖片上傳
      select(e){
        const tempFilePaths = e.tempFilePaths;
        //獲取圖片臨時路徑
        const imgUrl=tempFilePaths[0]
        uni.uploadFile({
          //圖片上傳地址
          url: 'https://xxx.xxx.com/api/uploadpic/', 
          filePath: imgUrl,
          //上傳名字，注意與后臺接收的參數(shù)名一致
          name: 'imgUrl',
          //設(shè)置請求頭
          header:{"Content-Type": "multipart/form-data"},
          //請求成功，后臺返回自己服務(wù)器上的圖片地址
          success: (uploadFileRes) => {
            console.log('uploadFileRes',JSON.parse(uploadFileRes.data));   
            //處理數(shù)據(jù)
            const path=JSON.parse(uploadFileRes.data)
            //賦值，前端渲染
            this.baseFormData.photo=path.imgUrl
          }
        });
      }, 
    }  
  }

三、案例二（上傳多張圖片）

<template>
  <view class="container example">
    <uni-forms ref="baseForm" :modelValue="baseFormData" :rules="rules" label-position="top">
      <uni-forms-item label="圖片上傳">
        <uni-file-picker
         v-model="imageValue"
         fileMediatype="image" 
         mode="grid" 
         @select="select"   
         @delete="delIMG"
         limit="9"></uni-file-picker>
      </uni-forms-item>
    </uni-forms>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        imgURL:'',
        //圖片
        imageValue:[],
      };
    },
    methods:{
      //圖片上傳
      select(e){
        const tempFilePaths = e.tempFilePaths;
        const imgUrl=tempFilePaths[0]
        uni.uploadFile({
          url: 'https://xxx.xxx.com/api/uploadpic2/', 
          filePath: imgUrl,
          name: 'imgUrl',
          header:{"Content-Type": "multipart/form-data"},
          success: (uploadFileRes) => {
            console.log('uploadFileRes',JSON.parse(uploadFileRes.data));
            let path=JSON.parse(uploadFileRes.data)
            //后端返回的地址，存入圖片地址
            this.imageValue.push({
              url:this.imgURL+path.imgUrl,
              name:''
            })
            console.log('imageValue',this.imageValue)
          }
        });
      },
      //圖片刪除
      delIMG(e){
        console.log('456',e)
        const num = this.imageValue.findIndex(v => v.url === e.tempFilePath);
        this.imageValue.splice(num, 1);
      }
    },
    onLoad() { 
      //全局定義的圖片訪問地址前綴
      this.imgURL=this.$imgURL
    }
  }
</script>

到此這篇關(guān)于uni-file-picker文件選擇上傳功能實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)uni-file-picker文件上傳內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: