<div v-if="uploadImg.url" class="upload-img">
<img :src="uploadImg.url">
<div class="upload-img-cover">
<Icon type="ios-eye-outline" @click.native="showBigImg = true"></Icon>
<Icon type="ios-trash-outline" @click.native="uploadImg = {}"></Icon>
</div>
</div>
<Upload
ref="upload"
:show-upload-list="false"
:before-upload="handleUpload"
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="showBigImg">
<img :src="uploadImg.url" style="width: 100%">
</Modal>
uploadImg: {},
showBigImg: false,
handleFormatError(file) {
this.$Notice.warning({
title: '文件格式不正确',
desc: '文件 ' + file.name + ' 格式不正确,请上传 jpg、jpeg 或 png 的图片文件。',
});
},
handleMaxSize(file) {
this.$Notice.warning({
title: '超出文件大小限制',
desc: '文件 ' + file.name + ' 太大,不能超过 2M。',
});
},
handleUpload(file) {
if (file.type !== 'image/jpg' && file.type !== 'image/jpeg' && file.type !== 'image/png') {
this.handleFormatError(file);
} else if (file.size > 2 * 1024 * 1024) {
this.handleMaxSize(file);
} else {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onloadend = () => {
this.uploadImg = {
url: reader.result,
file,
};
};
}
return false;
},
const formData = new FormData();
for (const key in this.modalParams) {
formData.append(key, this.modalParams[key]);
}
if (this.uploadImg.file) {
formData.append('logo', this.uploadImg.file);
}
this.$axios._api_dashboard_service.post('', formData).then(res => {});
this.$axios._api_dashboard_service.get('', { params: {} }).then(res => {
const result = res.data;
if (result.status === 'SUCCEED') {
const data = result.data;
let url = '';
if (data.url) {
url = 'data:image/png;base64,' + data.url;
}
this.uploadImg = {
url,
};
}
});
.upload-img{
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,.2);
margin-right: 4px;
}
.upload-img img{
width: 100%;
height: 100%;
}
.upload-img-cover{
display: none;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0,0,0,.6);
}
.upload-img:hover .upload-img-cover{
display: block;
}
.upload-img-cover i{
color: #fff;
font-size: 20px;
cursor: pointer;
margin: 0 2px;
}
保存图片
requireFile: false 表明文件不是必传,此配置是在egg-multipart 2.1.0版本加入的,低版本会报错,须升级egg
// await-stream-ready, 文件读写流 ready 库,主要是方便的使用 await 进行文件上传, 否则可能出现数据丢失的情况
const awaitWriteStream = require('await-stream-ready').write;
const stream = await ctx.getFileStream({ requireFile: false });
ctx.validate(rule, stream.fields);
const body = stream.fields;
if (stream.filename) {
if (!fs.existsSync(dir)) {
fs.mkdirSync(dir);
}
const filePath = path.join(dir, filename);
const writeStream = fs.createWriteStream(filePath);
try {
await awaitStreamReady(stream.pipe(writeStream));
} catch (err) {
await sendToWormhole(stream);
throw err;
}
} else {
await sendToWormhole(stream);
}
获取图片的base64编码,用于回显
const filePath = path.join(dir, filename);
let url = '';
if (fs.existsSync(filePath)) {
const data = fs.readFileSync(filePath);
url = data.toString('base64');
}
删除图片
const filePath = path.join(dir, filename);
if (fs.existsSync(filePath)) {
fs.unlinkSync(filePath);
}