vue+iview+node
vue
<template>
<div>
<div class="demo-upload-list"
v-for="item in uploadList"
:key="item.name">
<template v-if="item.status === 'finished'">
<img :src="item.url">
</template>
<template v-else>
<Progress v-if="item.showProgress"
:percent="item.percentage"
hide-info></Progress>
</template>
</div>
<Upload ref="upload"
:show-upload-list="false"
:format="['jpg','jpeg','png']"
:max-size="2048"
multiple
type="drag"
action="/api/upload/actorAvatar"
style="display: inline-block;width:58px;">
<div style="width: 58px;height:58px;line-height: 58px;">
<Icon type="ios-camera"
size="20"></Icon>
</div>
</Upload>
</div>
</template>
<script>
export default {
data () {
return {
uploadList: []
}
},
mounted () {
this.uploadList = this.$refs.upload.fileList;
},
methods: {
}
}
</script>
<style>
.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%;
}
</style>
node部分
const actorCard = async (ctx, next) => {
try {
const frontFile = ctx.request.files.frontFile
const backFile = ctx.request.files.backFile
const readerFront = fs.createReadStream(frontFile.path)
const readerBack = fs.createReadStream(backFile.path)
const idCardNo = ctx.request.body.idCardNo
const _url = `${config.baseURL}${ctx.request.url}`
const form = new FormData() // new formdata实例
form.append('frontFile', readerFront)
form.append('backFile', readerBack)
form.append('idCardNo', idCardNo)
form.append('actorId', JSON.parse(ctx.cookies.get('userInfo')).userId)
const req = await axios.post(_url, form, {
headers: form.getHeaders()
})
return (ctx.body = {
code: 200,
message: 'SUCCESS',
data: req.data.body
})
} catch (error) {
console.log('error===', error)
}
}