1:在做项目的时候总会遇到上传功能,我这里使用iview 的upload组件手动上传
2:js 代码如下所示
<FormItem label="照片:" prop="area">
<div class="demo-upload-list" v-for="(item,index) in imageUrls" :key="index">
<template>
<img :src="item">
<div class="demo-upload-list-cover">
<Icon type="ios-eye-outline" @click.native="handleView(item)"></Icon>
<Icon type="ios-trash-outline" @click.native="handleRemove(index)"></Icon>
</div>
</template>
</div>
<!-- upload -->
<Upload ref="upload" :show-upload-list="false"
:format="['jpg','jpeg','png']" :max-size="2048" :on-exceeded-size="handleMaxSize"
:before-upload="handleUpload" 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="currentUrl" v-if="visible" style="width: 100%">
</Modal>
<span class="tip">只支持 .jpg .png 等格式,最多6张</span>
</FormItem>
.tip {
position: absolute;
bottom: -28px;
left: 0;
color: #ff9900;
}
在这里插入代码片
handleUpload(file) {
if (this.imageUrls.length >= 6) {
this.$message({
type: 'warning',
message: '最多只能上传6张图片!'
});
return
}
upload(file).then(res => {
let {
name,
fullPath
} = res;
let url = fullPath.replace('22122', '80');
this.imageUrls.push(url);
}).catch(err => {
});
},
handleView(item) {
this.visible = true;
this.currentUrl = item;
},
handleRemove(index) {
this.$confirm('是否删除?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(()=>{
this.imageUrls.splice(index, 1);
})
},
export const upload = (file) =>{
let param = new FormData();
param.append('file',file);
return request.post(API.uploadUrl,param,{headers:{'Content-Type':'multipart/formdata'}}).then(res=>{
return Promise.resolve(res)
})
}