vue el-upload一次接口上传多张图片
<el-form-item label="图片上传:"><el-uploadref="upload"action="#"list-type="picture-card":file-list="fileList"...
·
<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) // 调用文件上传方法
}
更多推荐
已为社区贡献39条内容
所有评论(0)