vue-Vant組件上傳圖片

<van-uploader v-model="fileList" multiple :max-count="1" class = "image" :after-read="afterRead" :max-size="20 * 1024 * 1024"enctype="multipart/form-data"/><br /><van-button type="info" size="normal" @click.prevent="submitimage" native-type="button" class="img">上傳圖片</van-button>

@click.prevent
在表單中，除了提交按鈕外，可能還有一些其他的功能性按鈕，如發送驗證碼按鈕。在使用這些按鈕時，要注意將native-type設置為button，否則會觸發表單提交。

afterRead (file) {// 此時可以自行將文件上傳至服務器console.log(file.file)// const result = await uploadimage(file.file)// console.log(result)// var url = null// blob二進制流// const URL = window.URL || window.webkitURL// url = URL.createObjectURL(file.file)// console.log(typeof url)// console.log(url.slice(5))// const resulturl = url.slice(5)// console.log(resulturl)// this.file = resulturl// this.files = file// 在這塊創建FormData對象// FormData 對象的使用：// 1.用一些鍵值對來模擬一系列表單控件：即把form中所有表單元素的name與value組裝成一個queryString// 2. 異步上傳二進制文件。// 上傳圖片需要轉換二進制這里要用到FormDataconst forms = new FormData()// 這里的file表示給后臺傳的屬性名字，這里看接口文檔需要傳的的屬性forms.append('file', file.file) // 獲取上傳圖片信息this.files = filereturn file// const result = uploadimage(forms)// console.log(result)// const uploadimage = file => requests({// method: 'post',// url: '/uploadTest',// file,// headers: { 'Content-Type': 'multipart/form-data' }// })// const result = await requests.post('/uploadTest', file, { headers: { 'Content-Type': 'multipart/form-data' } })// console.log(result)},async submitimage () {// 提交上傳圖片的數據console.log('發送數據')console.log(this.files)const { fileList } = thisconst testimgurl = { fileList }// console.log(testimgurl)console.log(testimgurl.fileList[0])if (testimgurl.fileList[0] === undefined) {Toast.fail('請上傳圖片')return 'error'}// console.log('未上傳圖片的信息')// if (this.files.File !== undefined) {// alert('上傳圖片成功')// } else {// alert('請重新上傳圖片')// }// 在這塊創建FormData對象// FormData 對象的使用：// 1.用一些鍵值對來模擬一系列表單控件：即把form中所有表單元素的name與value組裝成一個queryString// 2. 異步上傳二進制文件。// 上傳圖片需要轉換二進制這里要用到FormDataconst forms = new FormData()// 這里的file表示給后臺傳的屬性名字，這里看接口文檔需要傳的的屬性forms.append('file', this.files.file) // 獲取上傳圖片信息const result = await uploadimage(forms)console.log(result)if (result.status === 200) {console.log('上傳圖片成功')} else {alert('上傳圖片失敗')}},

限制圖片的大小

if (testimgurl.fileList[0] === undefined) {console.log('未儲存圖片')} else {var size = testimgurl.fileList[0].file.sizeconsole.log(size)if (size > (5 * 1024 * 1024)) {Toast.fail('文件大小不能超過 5M')// console.log('圖片太大，請重新選擇')return 'error'}}

總結

以上是生活随笔為你收集整理的vue-Vant组件上传图片的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。