Vue 項目使用 axios + iview 的 upload 組件實現文件上傳功能遇到的問題以及解決方法


問題描述:

需求是使用 iview 的 upload 組件上傳文件,解析成功后,展示解析的內容,另外有單獨的提交操作,需要把上傳的文件 file 放到 data 參數里面一並提交,目前項目對 axios 整體做了封裝,普通請求可以使用,但是涉及到需要傳遞 file 的這種情況就不行了。

解決方案:

首先需要使用到 FormData 對象,let params = new FormData()在 upload 組件的 beforeUpload(file) 鈎子中把獲取到的文件裝入文件對象中,this.params.set('file',file),最后在提交事件里邊加上其他需要傳遞的參數,this.params.set('xx',xx),發送請求如下:

this.$axios.post(apiURL,this.param,{
    headers: {
        'X-Token':  xx,'X-Version':  'V2.1.0','X-Url': apiURL
    }
}).then(data=>{
    console.log('上傳提交',data);
}).catch(error=>{
    this.$Message.error({
        content: error,
        duration:3
    })
})

正常發送 post 請求參數我們都會對參數進行序列化,在這里我們不能對參數進行序列化,否則傳遞的就不是文件,導致提交失敗


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM