vant自動上傳圖片/文件

• 2022 年 8 月 3 日
• 筆記
• Vant, VUE, Vue學習坎坷路, 移動端

vant自動上傳文件/圖片

vant上傳圖片與elementUI有所不同，沒有自動上傳功能，所以與後端進行接口對接的時候可以在after-read中將文件進行上傳

html頁面

<!-- 上傳圖片 -->
<van-field name="uploadImg" label="圖片">
    <template #input>
        <van-uploader
                      :max-count="5"
                      multiple
                      v-model="uploadImg"
                      :max-size="50 * 1024 * 1024"
                      @oversize="onOversize"
                      :before-read="beforeRead"
                      :after-read="afterRead"
                      @delete="deleteFile"
                      accept="image/jpeg,image/jpg,image/png"
                      upload-icon="photo"
                      >
        </van-uploader>
    </template>
</van-field>

max-count:最大上傳個數

multiple:是否支持多選

:max-size:文件大小限制

@oversize:文件超出大小後的方法

:before-read:文件讀取之前（可以做文件類型等校驗）也可以進行文件大小判斷

:after-read:文件讀取之後（此時可以進行文件上傳）

@delete:文件刪除時的方法

accept:文件類型

upload-icon:顯示的圖標

文件超出大小時的方法

onOversize() {
    this.$toast('圖片大小不能超過 50Mb')
},

文件讀取之前

beforeRead(file) {
    if (file.type !== 'image/jpeg' && file.type !== 'image/jpg' && file.type !== 'image/png') {
        this.$notify({ type: 'danger', message: '請上傳 jpg、jpeg、png 格式圖片' })
        return false
    }
    return true
},

文件讀取之後

一般來說，前端在進行Post請求的時候會根據場景發送不同類型的數據，該Post請求頭的Content-Type字段必須聲明相應的數據類型，比如說application/x-www-form-urlencoded、application/json、multipart/form-data等，根據實際應用，有時候會需要請求時來手動設置，不過大部分情況下瀏覽器會根據Body中的數據來自發的設置相應的請求頭。

afterRead(file, detail) {
    // 此時可以自行將文件上傳至服務器
    console.log(file, detail)
    
    //發送請求
    let params = new FormData()
    params.append('file', file.file)
    params.append('size', file.file.size)
    
    api.submit(params)
        .then((res) => {
        this.$message.success('上傳圖片成功')
    })
        .catch((err) => {
        console.error(err)
    })
},

文件刪除後

deleteFile(file, detail) {
    console.log(file,detail)
},