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裡面上傳一張圖片
- El-Upload元件上傳圖片並新增水印元件
- Spring Boot MVC 單張圖片和多張圖片上傳 和通用檔案下載Spring BootMVC
- 實現簡單的輪播圖(單張圖片、多張圖片)
- QQ空間無法上傳多張圖片解決方案
- 用Vue來實現圖片上傳多種方式Vue
- 多圖片formpost上傳ORM
- JS—圖片壓縮上傳(單張)JS
- vue 上傳圖片進行壓縮圖片Vue
- Vue +Element Ui 使用Upload元件實現多圖片上傳VueUI元件
- js:原生多張圖片延遲載入(圖片自己找)JS
- 大頭針顯示多張圖片
- Android儲存多張圖片到本地Android
- el-upload控制元件一次介面請求上傳多個檔案控制元件
- 無需下載軟體怎麼將多張圖片組合成一張圖片
- vue圖片預覽上傳Vue
- Vue圖片裁剪上傳元件Vue元件
- win10如何填充多張圖片 win10桌面填充多張圖片怎麼設定Win10
- HTML5利用canvas,把多張圖合併成一張圖片HTMLCanvas
- .Net之Layui多圖片上傳UI
- js中圖片上傳,多次上傳同一張不生效JS
- 利用Python講多張圖片合成PDF檔案Python
- vue 圖片上傳到阿里雲ossVue阿里
- vue 實現貼上上傳圖片Vue
- vue 本地預覽多圖上傳Vue
- 在python中將多張圖片合成為視訊Python
- 觸屏 H5 如何實現壓縮並上傳多張圖片,同時還可以進行圖片壓縮H5
- 利用vue-cropper剪裁圖片並上傳Vue
- 前端學習筆記------多張圖片生成canvas思路.md前端筆記Canvas
- web技術分享| 圖片上傳與圖片裁剪結合 vue3WebVue
- 一個Vue圖片上傳剪裁壓縮元件Vue元件
- element-ui+Vue實現的圖片上傳UIVue
- win10系統怎麼設定讓一張主題包含多張圖片Win10
- 上傳圖片
- 單張圖片懶載入
- 使用Vue實現圖片上傳的三種方式Vue
- 圖片上傳及圖片處理