vue部分
在dom树创建hidden的input 模拟点击事件调用input选取图片并创建formData上传图片
<body>
<input hidden="" ref="kuang" type="file" @change="fileChangeHan"></input>
<div :style="{'background-image':" class="upbox">
<i class="el-icon-plus"></i>
</div>
</body>
<script>
export default {
data() {
return {
base64: '',
file: null
}
},
methods: {
clickUpBoxHan () {
// 创建一个事件
let evt = document.createEvent('MouseEvents');
// 初始化这个事件
evt.initMouseEvent('click', false, false);
// 发送给input框
this.$refs.kuang.dispatchEvent(evt);
},
// 当用户选择了一个图片之后做的事情
fileChangeHan(){
// 显示对话框
this.isShowDialog1 = true;
// 创建虚拟表单
let form = new FormData();
// 备份
var self = this;
// 在虚拟表单中追加图片
form.append('tupian', this.$refs.file.files[0]);
// 提交虚拟表单
http.post('/api/upload', form, {
// 头部
headers: {'Content-Type': 'multipart/form-data'},
// 进度
onUploadProgress: progressEvent => {
let complete = progressEvent.loaded / progressEvent.total * 100;
self.p1 = complete;
}
}).then(data => {
self.serverFileName = data.data.filename;
self.picRealWidth = data.data.width;
self.picRealHeight = data.data.height;
// 关闭第一个对话框，打开第二个
self.isShowDialog1 = false;
self.isShowDialog2 = true;
});
},
changeHan () {
// 得到图片
let thepic = this.$refs.kuang.files[0];
// 设置图片文件
this.file = thepic;
// 上传前预览
let fr = new FileReader();
// 读取这个图片
fr.readAsDataURL(thepic);
// 读完了
fr.onload = (e) => {
this.base64 = e.target.result;
};
}
}
}
</script>
express部分
利用gm裁剪图片
app.post('/upload', (req, res) => {
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Method', 'OPTIONS, POST');
res.setHeader('Access-Control-Allow-Content', '*');
res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
// parse a file upload
var form = new formidable.IncomingForm();
// 配置上传文件夹
form.uploadDir = __dirname + /uploads;
// 保留扩展名
form.keepExtensions = true;
form.parse(req, function(err, fields, files) {
res.json({
'ok': true,
'filename': path.parse(files.tupian.path).base
});
});
});
