携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第2天，点击查看活动详情
场景
实现不通过action地址自动上传，而是通过点击上传按钮手动上传的实现。
效果图
需求
我查看iview的文档，上面好像只能通过action,选择图片，自动上传，没有通过本地方法的处理，而我的需求是通过选择多个图片，然后点击提交按钮，所有的文件一起上传到服务器上。
<div class="demo-upload-list" v-for="item in uploadList" :key="item.url">
<img :src="item.url" />
<div class="demo-upload-list-cover">
<Icon
type="ios-eye-outline"
@click.native="handleView(item.url)"
></Icon>
<Icon
type="ios-trash-outline"
@click.native="handleRemove(item)"
></Icon>
</div>
</div>
这一段代码是将所有选择的图片拿到，然后循环出来。
<Upload
ref="upload"
:show-upload-list="true"
:format="['jpg', 'jpeg', 'png']"
:before-upload="handleBeforeUpload"
multiple
type="drag"
action=""
style="display: inline-block;width:58px;"
>
<div style="width: 58px;height:58px;line-height: 58px;">
<Icon type="ios-camera" size="20"></Icon>
</div>
</Upload>
这一段代码是将上传的按钮，
:show-upload-list="true"是否显示上传列表。
:format="['jpg', 'jpeg', 'png']"规定了上传文件的格式
:before-upload="handleBeforeUpload"上传前执行的方法
multiple type="drag"多选和是否允许拖拽
<Modal title="查看图片" v-model="visible">
<img :src="imgUrl" v-if="visible" style="width: 100%" />
<div slot="footer" class="modal_footer">
<Button
class="option_btn"
@click="visible = false"
style="background-color: #e00003;"
>确定</Button
>
</div>
</Modal>
这一段是上传图片的预览模态窗。
以下是我的完整的代码。
<template>
<div>
<div class="demo-upload-list" v-for="item in uploadList" :key="item.url">
<img :src="item.url" />
<div class="demo-upload-list-cover">
<Icon
type="ios-eye-outline"
@click.native="handleView(item.url)"
></Icon>
<Icon
type="ios-trash-outline"
@click.native="handleRemove(item)"
></Icon>
</div>
</div>
<Upload
ref="upload"
:show-upload-list="true"
:format="['jpg', 'jpeg', 'png']"
:before-upload="handleBeforeUpload"
multiple
type="drag"
action=""
style="display: inline-block;width:58px;"
>
<div style="width: 58px;height:58px;line-height: 58px;">
<Icon type="ios-camera" size="20"></Icon>
</div>
</Upload>
<Modal title="查看图片" v-model="visible">
<img :src="imgUrl" v-if="visible" style="width: 100%" />
<div slot="footer" class="modal_footer">
<Button
class="option_btn"
@click="visible = false"
style="background-color: #e00003;"
>确定</Button
>
<!-- <Button class="option_btn" @click="close_modal" style="background-color: #a1a0ae;">取消</Button> -->
</div>
</Modal>
<Button :loading="confirmLoad" style="background-color:#1890ff;color: #fff" @click="upload">
上传
</Button>
</div>
</template>
<script>
export default {
data() {
return {
imgUrl: "",
visible: false,
// 上传的文件数组
uploadList: [],
onceUpload: true,
//按钮加载
confirmLoad: false
};
},
methods: {
/**
* 方法作用: 预览图片
**/
handleView(url) {
this.imgUrl = url;
this.visible = true;
},
/**
* 方法作用: 去除上传文件
**/
handleRemove(file) {
this.uploadList.splice(this.uploadList.indexOf(file), 1);
},
/**
* 方法作用: 获取上传文件
**/
handleBeforeUpload(file) {
file.url = this.convertSrc(file);
let segmentation= file.name.split(".");
if (
segmentation[segmentation.length - 1] == "png" ||
segmentation[segmentation.length - 1] == "jpg" ||
segmentation[segmentation.length - 1] == "jpeg"
) {
this.uploadList.push(file);
} else {
this.$Message.info(`上传类型只能是jpg,jpeg,png`);
return;
}
// false代表不上传到action的地址，只能手动上传，true 代表根据action地址 自动上传
return false;
},
/**
* 方法作用: 上传
**/
upload() {
let that = this;
if (that.uploadList.length == 0) {
that.$Message.error("上传文件不能为空");
return;
}
//按钮加载
this.confirmLoad = true;
let formData = new FormData();
for (let i = 0; i < that.uploadList.length; i++) {
formData.append("file", that.uploadList[i]);
}
console.log("提交图片");
//防止多次點擊
if (this.onceUpload) {
this.onceUpload = false;
//调用上传接口，上传图片
this.$api
.uploadFile(formData)
.then(res => {
if (res.code === 200) {
this.$Message.success("上传成功");
} else {
this.$Message.warning(res.message);
}
this.confirmLoad = false;
that.uploadList = [];
this.onceUpload = true;
})
.catch(err => {
this.confirmLoad = false;
this.onceUpload = true;
});
}
},
/**
* 方法作用: 转换成SRC显示在页面上
**/
convertSrc(file) {
return window.URL.createObjectURL(file);
}
},
mounted() {
}
};
</script>
<style>
.modal_footer {
margin: 0;
}
.demo-upload-list {
display: inline-block;
width: 60px;
height: 60px;
text-align: center;
line-height: 60px;
border: 1px solid transparent;
border-radius: 4px;
overflow: hidden;
background: #fff;
position: relative;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
margin-right: 4px;
}
.demo-upload-list img {
width: 100%;
height: 100%;
}
.demo-upload-list-cover {
display: none;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.6);
}
.demo-upload-list:hover .demo-upload-list-cover {
display: block;
}
.demo-upload-list-cover i {
color: #fff;
font-size: 20px;
cursor: pointer;
margin: 0 2px;
}
</style>
以上的上传的方法，我都写了注释。
