vue el-upload一次介面上傳多張圖片
<el-form-item label="圖片上傳:">
<el-upload
ref="upload"
action="#"
list-type="picture-card"
:file-list="fileList"
accept="bmp, jpg, png, gif, jpeg"
:http-request="modeUpload"
:on-change="handleChange"
:limit="3"
multiple
size="mini"
:on-exceed="exceedHandle"
:auto-upload="false
>
<i slot="default" class="el-icon-plus"></i>
<div slot="file" slot-scope="{file}">
<img
class="el-upload-list__item-thumbnail"
:src="file.url"
alt=""
/>
<span class="el-upload-list__item-actions">
<span
class="el-upload-list__item-preview"
@click="handlePictureCardPreview(file)"
>
<i class="el-icon-zoom-in"></i>
</span>
<span
v-if="!disabled"
class="el-upload-list__item-delete"
@click="handleRemove(file)"
>
<i class="el-icon-delete"></i>
</span>
</span>
</div>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="" />
</el-dialog>
</el-form-item>
<div slot="footer" class="dialog-footer">
<el-button icon="el-icon-collection" @click="confirmationReceipt">提交</el-button>
<el-button icon="el-icon-close" @click="receiptconfirmationDialog = false">取消</el-button>
</div>
return {
fileList_now: [], // 儲存圖片列表
// 檔案狀態改變時的鉤子,新增檔案、上傳成功和上傳失敗時都會被呼叫
handleChange(file, fileList) {
this.fileList_now = fileList
},
// 檔案上傳
upLoadImg(fileListArr) {
const fd = new FormData()
this.fileList_now.forEach( (file) => {// 因為要上傳多個檔案,所以需要遍歷
fd.append('file', file.raw)
})
uploadImgFiles(fd).then((response) => { // 上傳圖片的介面
this.returnFileNameList = response.data;
})
},
PS: upLoadImg方法為點選提交按鈕觸發
// 點選提交按鈕事件
confirmationReceipt() {
this.receiptconfirmationDialog = false // 關閉對話方塊
this.upLoadImg(this.fileItem) // 呼叫檔案上傳方法
}
相關文章
- vue + 原生input 框上傳多張圖片Vue
- 【董天一】如何在IPFS裡面上傳一張圖片
- 阿里雲上傳多張圖片阿里
- Spring Boot MVC 單張圖片和多張圖片上傳 和通用檔案下載Spring BootMVC
- el-upload控制元件一次介面請求上傳多個檔案控制元件
- El-Upload元件上傳圖片並新增水印元件
- QQ空間無法上傳多張圖片解決方案
- 實現簡單的輪播圖(單張圖片、多張圖片)
- iOS 相簿選中多張圖片iOS
- win10如何填充多張圖片 win10桌面填充多張圖片怎麼設定Win10
- 無需下載軟體怎麼將多張圖片組合成一張圖片
- vue生命週期鉤子,一張圖片Vue
- Android儲存多張圖片到本地Android
- HTML5利用canvas,把多張圖合併成一張圖片HTMLCanvas
- 用Vue來實現圖片上傳多種方式Vue
- js:原生多張圖片延遲載入(圖片自己找)JS
- PHP+jQuery+Ajax實現多圖片上傳介紹PHPjQuery
- 利用Python講多張圖片合成PDF檔案Python
- Vue +Element Ui 使用Upload元件實現多圖片上傳VueUI元件
- 多圖片formpost上傳ORM
- Vue圖片裁剪上傳元件Vue元件
- vue圖片預覽上傳Vue
- 前端學習筆記------多張圖片生成canvas思路.md前端筆記Canvas
- 在python中將多張圖片合成為視訊Python
- 觸屏 H5 如何實現壓縮並上傳多張圖片,同時還可以進行圖片壓縮H5
- vue 上傳圖片進行壓縮圖片Vue
- java生成一張圖片Java
- el-upload 檔案上傳帶引數
- .Net之Layui多圖片上傳UI
- vue 實現貼上上傳圖片Vue
- VUE + UEditor 單圖片跨域上傳Vue跨域
- 單張圖片懶載入
- el-upload拍照上傳多個檔案報錯 ERR_UPLOAD_FILE_CHANGED問題
- vue 本地預覽多圖上傳Vue
- 利用vue-cropper剪裁圖片並上傳Vue
- vue 圖片上傳到阿里雲ossVue阿里
- VUE-多檔案斷點續傳、秒傳、分片上傳Vue斷點
- 分享cropper剪下單張圖片demo